用容易的js写图片切换
用简单的js写图片切换
图片可以按向左向右键进行切换，我不太会js，希望简单一点
------解决思路----------------------
百度一下源码很多
------解决思路----------------------
这个例子是我自己写的，很简单，图片宽度和高度在css中修改、切换的速度在js中修改，图片链接在html中修改。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ss</title>
<style>
/*图片点击切换css*/
#slideshowvertical {
height: 326px;
overflow: hidden;
margin-bottom: 10px;
}
#previewPane {
float: left;
height: 326px;
padding-top: 2px;
width: 678px;
}
#mouseoverInfo {
position: relative;
width: 678px;
height: 326px;
margin-top: -326px;
}
.img_leftBtn {
position: absolute;
left: 10px;
top: 45%;
display: inline-block;
width: 58px;
height: 50px;
background: url("http://vacation.homsom.com/Content/images/img_leftArrow.png") no-repeat 0 0;
cursor: pointer;
}
.img_rightBtn {
position: absolute;
right: 10px;
top: 45%;
display: inline-block;
width: 58px;
height: 50px;
background: url("http://vacation.homsom.com/Content/images/img_rightArrow.png") no-repeat 0 0;
cursor: pointer;
}
</style>
<script src="http://e.homsom.com/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div id="previewPane"> <img id=obj src="http://vacation.homsom.com/Content/images/default_678_407.gif" border=0 width="678" height="326" onerror="this.src='/Content/images/default_678_407.gif'" alt="" />
<div id="mouseoverInfo" style="display:none;">
<div class="img_leftBtn"></div>
<div class="img_rightBtn"></div>
<div class="imgIndex">0</div>
</div>
<div id="change_pic" style="display:none;"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting002.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuada.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan004.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuashuang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan003.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/datang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/neijing.png" border="0" width="678" height="407" style="display:none"> </div>
</div>
<script>
$(document).ready(function(e) {
var a = "";
var curIndex = 0;
//时间间隔 单位毫秒
var timeInterval=3000;
var arr=new Array();
$("#change_pic").children("img").each(function () {
var img_src = $(this).attr("src");
arr.push(img_src);
});
$("#obj").attr("src", arr[0]);
clearInterval(a);
a = setInterval(changeImg, timeInterval);
function changeImg() {
var obj = document.getElementById("obj");
if (curIndex == arr.length - 1) {
curIndex = 0;
}
else {
curIndex += 1;
}
$(".imgIndex").html(curIndex);
obj.src = arr[curIndex];
}
//图片mouseover效果
$("#previewPane").mouseover(function () {
$("#mouseoverInfo").show();
clearInterval(a);
});
$("#previewPane").mouseout(function () {
$("#mouseoverInfo").hide();
clearInterval(a);
a = setInterval(changeImg, timeInterval);
});
//左箭头
$(".img_leftBtn").click(function () {
var obj = document.getElementById("obj");
if (curIndex == 0) {
curIndex = arr.length - 1;
}
else {
curIndex -= 1;
}
$(".imgIndex").html(curIndex);
//$(".imgText").html(imageText[curIndex]);
obj.src = arr[curIndex];
});
//右箭头
$(".img_rightBtn").click(function () {
var obj = document.getElementById("obj");
if (curIndex == arr.length - 1) {
curIndex = 0;
}
else {
curIndex += 1;
}
$(".imgIndex").html(curIndex);
//$(".imgText").html(imageText[curIndex]);
obj.src = arr[curIndex];
});
});
</script>
</body>
</html>
图片可以按向左向右键进行切换，我不太会js，希望简单一点
------解决思路----------------------
百度一下源码很多
------解决思路----------------------
这个例子是我自己写的，很简单，图片宽度和高度在css中修改、切换的速度在js中修改，图片链接在html中修改。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ss</title>
<style>
/*图片点击切换css*/
#slideshowvertical {
height: 326px;
overflow: hidden;
margin-bottom: 10px;
}
#previewPane {
float: left;
height: 326px;
padding-top: 2px;
width: 678px;
}
#mouseoverInfo {
position: relative;
width: 678px;
height: 326px;
margin-top: -326px;
}
.img_leftBtn {
position: absolute;
left: 10px;
top: 45%;
display: inline-block;
width: 58px;
height: 50px;
background: url("http://vacation.homsom.com/Content/images/img_leftArrow.png") no-repeat 0 0;
cursor: pointer;
}
.img_rightBtn {
position: absolute;
right: 10px;
top: 45%;
display: inline-block;
width: 58px;
height: 50px;
background: url("http://vacation.homsom.com/Content/images/img_rightArrow.png") no-repeat 0 0;
cursor: pointer;
}
</style>
<script src="http://e.homsom.com/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div id="previewPane"> <img id=obj src="http://vacation.homsom.com/Content/images/default_678_407.gif" border=0 width="678" height="326" onerror="this.src='/Content/images/default_678_407.gif'" alt="" />
<div id="mouseoverInfo" style="display:none;">
<div class="img_leftBtn"></div>
<div class="img_rightBtn"></div>
<div class="imgIndex">0</div>
</div>
<div id="change_pic" style="display:none;"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/canting002.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan001.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuada.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan004.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/haohuashuang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/waiguan003.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/datang.png" border="0" width="678" height="407" style="display:none"> <img src="http://images.homsom.com/Product/国内/浙江/绍兴/绍兴乔波国际会议中心/neijing.png" border="0" width="678" height="407" style="display:none"> </div>
</div>
<script>
$(document).ready(function(e) {
var a = "";
var curIndex = 0;
//时间间隔 单位毫秒
var timeInterval=3000;
var arr=new Array();
$("#change_pic").children("img").each(function () {
var img_src = $(this).attr("src");
arr.push(img_src);
});
$("#obj").attr("src", arr[0]);
clearInterval(a);
a = setInterval(changeImg, timeInterval);
function changeImg() {
var obj = document.getElementById("obj");
if (curIndex == arr.length - 1) {
curIndex = 0;
}
else {
curIndex += 1;
}
$(".imgIndex").html(curIndex);
obj.src = arr[curIndex];
}
//图片mouseover效果
$("#previewPane").mouseover(function () {
$("#mouseoverInfo").show();
clearInterval(a);
});
$("#previewPane").mouseout(function () {
$("#mouseoverInfo").hide();
clearInterval(a);
a = setInterval(changeImg, timeInterval);
});
//左箭头
$(".img_leftBtn").click(function () {
var obj = document.getElementById("obj");
if (curIndex == 0) {
curIndex = arr.length - 1;
}
else {
curIndex -= 1;
}
$(".imgIndex").html(curIndex);
//$(".imgText").html(imageText[curIndex]);
obj.src = arr[curIndex];
});
//右箭头
$(".img_rightBtn").click(function () {
var obj = document.getElementById("obj");
if (curIndex == arr.length - 1) {
curIndex = 0;
}
else {
curIndex += 1;
}
$(".imgIndex").html(curIndex);
//$(".imgText").html(imageText[curIndex]);
obj.src = arr[curIndex];
});
});
</script>
</body>
</html>