脚本做图片轮播

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<button class="shang" type="button">上一张</button>
<div class="da" style="width:100%;float:left;">
<img />
<div class="xiao" style="opacity:1;"></div>
</div>
<button class="xia" type="button">下一张</button>

</body>
</html>
<script src="scripts/jquery.min.js"></script>

$("img").attr("src", a[0]);

lunbo = setInterval(zidong, 1500);//每隔1.5秒执行一次方法zidong 此处的方法不能带参数

$(".shang").click(function () {//button shang点击时停止图片轮播
clearInterval(lunbo);
caozuo(-1);
});
$(".xia").click(function () {
clearInterval(lunbo);
caozuo(1);
});

$("img").mouseover(function () {//鼠标移上IMG控件时候清楚图片轮播进程
clearInterval(lunbo);
console.log("鼠标移上图片："+lunbo);
});

$(".shang").mouseleave(function () {//鼠标离开button shang控件重新开始图片轮播进程，此处是实例化一个新的轮播
lunbo = setInterval(zidong, 1500);//
});
$(".xia").mouseleave(function () {
lunbo = setInterval(zidong, 1500);
});
$("img").mouseleave(function () {
console.log("鼠标离开图片：" + lunbo);//输出ID
lunbo = setInterval(zidong, 1500);
console.log("重新执行：" + lunbo);
});
});

function zidong() {
caozuo(1)
}

function caozuo(g) {
i = i + g;
if (i < 0) {
i = 0;
}
else if (i > a.length - 1) {
i = 0;
}
$("img").attr("src", a[i]);

}

</script>

猜你喜欢