在本节教程中，我们将使用定时器修改“JS为元素添加自定义属性”一节中的例 4，以实现图片的轮播（自动切换）。具体代码请见示例 1。
【例 1】使用定时器实现图片轮播。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用定时器实现图片轮播</title>
<style>
ul{margin:0;padding:0;}
li{display:inline-block;}
body{background:#333;}
#pic{width:300px;height:206px; margin:0 auto;}
#pic img{width:300px;height:206px;}
#pic ul{margin-top:10px;text-align:center;}
#pic .item,#pic .active{width:9px;height:9px;cursor: pointer;
border-radius:10px;margin:1px 1px 1px 8px;}
#pic .item {background:#FFF;}
#pic .active {background: #F60;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oUl = oDiv.getElementsByTagName('ul')[0];
var arrUrl = ['images/p1.jpg','images/p2.jpg','images/p3.jpg','images/p4.jpg'];
var aLi = oDiv.getElementsByTagName('li');
var num = 0;
var timer = null;//定时器
//生成对应图片个数的列表项
for(var i = 0; i < arrUrl.length; i++){
oUl.innerHTML += "<li class = 'item'></li>";
}
//初始化
function fnTab(){
oImg.src = arrUrl[num];
for(var i = 0; i < aLi.length; i++){
aLi[i].className = 'item';//首先全部清空活动状态
}
aLi[num].className = 'item active';//然后设置当前li为活动状态
}
fnTab();//调用函数实现初始化设置
for(var j = 0; j < aLi.length; j++){
aLi[j].index = j;//为每个列表项自定义索引属性，属性值和数组下标一一对应
aLi[j].onclick = function(){
num = this.index;//将当前li的索引属性值赋给变量num
fnTab();
};
}
function autoPlay(){//使用定时器实现每隔2秒自动切换图片
timer = setInterval(function(){
num++;
num %= arrUrl.length;
fnTab();
},2000);
}
autoPlay();//调用自动切换图片函数
oImg.onmouseover = function(){//光标移到图片上停止图片切换
clearInterval(timer);
}
oImg.onmouseout = autoPlay;//光标移开图片后继续自动切换图片
};
</script>
</head>
<body>
<div id="pic">
<img src=""/>
<ul>
</ul>
</div>
</body>
</html>
上述代码是在“JS为元素添加自定义属性”一节中的例 4 的基础上进行了一些修改，修改内容主要包括添加定时器、光标移入和移开事件处理以及变量 num 的使用。这些修改内容实现了图片的自动切换、光标移入时停止图片切换以及光标移开时继续自动切换图片功能。
对这些功能的实现，变量 num 在其中起到了关键作用：通过 num%=arrUrl.length 代码，实现了图片自动切换时的轮播；另外，在单击列表事件中通过 num=this.index 代码，则可以实现单击任意圆点后，都可以从该圆点所对应的图片开始继续切换。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23983.html