JS定时器实现图片轮播

【例 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 

 /div 

 /body 

 /html 

上述代码是在 JS为元素添加自定义属性 一节中的例 4 的基础上进行了一些修改，修改内容主要包括添加定时器、光标移入和移开事件处理以及变量 num 的使用。这些修改内容实现了图片的自动切换、光标移入时停止图片切换以及光标移开时继续自动切换图片功能。

对这些功能的实现，变量 num 在其中起到了关键作用：通过 num%=arrUrl.length 代码，实现了图片自动切换时的轮播；另外，在单击列表事件中通过 num=this.index 代码，则可以实现单击任意圆点后，都可以从该圆点所对应的图片开始继续切换。

23983.html