腳本作圖片輪播

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。