脚本作图片轮播

时间 2019-11-12
标签脚本图片繁體版
原文原文链接
<!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>

<script>
var i = 0;
var lunbo;
var a = [
"../images/2.jpg", "../images/a1.gif", "../images/c9c3fc7d41b7dd6917e04b3d6d663cd2_008dbc2dd2be4174bae333c3a3fbca38.png", "../images/co.jpg", "../images/ico.gif", "../images/logo.png", "../images/n1.jpg", "../images/n2.jpg"
];
$(document).ready(function () {

$("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>