首页 > 编程笔记 > JavaScript笔记

JS定时器实现图片轮播

在本节教程中，我们将使用定时器修改“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 代码，则可以实现单击任意圆点后，都可以从该圆点所对应的图片开始继续切换。

所有教程

优秀文章