JS的setInterval定时器

之前的博文：JS点击上一张下一张轮播li标签1、
是通过点击按钮切换上一张下一张图片，这个是手动操作的，JS里还有定时器可以设置每隔多少时间执行一次。
例如之前博文的那个，把下一张的next()方法，挂到定时器上，每隔一秒执行一次这个next()方法，就可以实现每隔一秒自动切换图片。
格式：setInterval(方法，时间）；
例如 ：setInterval(next(),1000);//每隔一秒执行一次next()方法。
这里的1000单位是毫秒，秒和毫秒的换算单位为：1秒=1000毫秒。

测试代码：这里用log输出下时间，测试下每次执行的方法的时间。定时器前面的代码都是之前博文的，有介绍。

<style>
.box1{list-style-type:none;width:200px;height:100px;overflow:hidden;position:relative;}
.box1 li{width:200px;height:100px;position:absolute;top:0px;left:0px;}
.box1 li.now{opacity:1;}/**1代表完全不透明**/
.box1 li.others{opacity:0;}/**1代表完全透明**/
 </style>
 </head>
 <body>
 <div class="box1">
     <ul class="list1">
       <li id="img1" class="now"><img src="images/img1.png"></li>
       <li id="img2" class="others"><img src="images/img2.png"></li>
       <li id="img2" class="others" style="background:red"></li>
     </ul>
 </div>
 <input type="button" value="上一张" onclick="pre()"><br>
  <input type="button" value="下一张" onclick="next()">
 <script>
 var index=0;
 var lis=document.getElementsByTagName("li");
 var indexlength=lis.length-1;//长度-1是最后一个的索引
function pre(){
    index--;
    if(index<0)
    {
        index=indexlength;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
};
function next(){
    index++;
    if(index>indexlength)
    {
        index=0;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
};
var timer=setInterval(function(){next();var date=new Date();console.log("时间:"+(new Date()).toLocaleTimeString());},1000);
 </script>

图示 ：
共3张图片，循环播放这三个图，由于index索引是从0开始的，所以第0张就是第一张，第1张就是第2张，第2张就是第三张。

posted @ 2019-12-26 13:24  花谢悦神  阅读(1315)  评论(0)  编辑  收藏  举报