JS的setInterval定时器2图片切换按钮事件修改

2021年09月15日 阅读数:2
这篇文章主要向大家介绍JS的setInterval定时器2图片切换按钮事件修改,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

以前的两个博文里:JS点击上一张下一张轮播li标签1JS的setInterval定时器
一个设置了上一页下一页手动按钮切换显示图片,一个用定时器设置了每隔一秒执行一次下一页的的那个函数。
可是,定时器和手动切换放到一块的时候,会发现有点问题,例如,点击了一下上一页按钮,图片切换到了上一页,可是若是定时器恰好到了切换下一页的时间,会表现为,刚点了下上一页,接着就跳转到了下一页,这是不合理的。
此外,通常还有须要连续点击的状况,好比连续点击切换到本身想要看的图片,到了本身要看的图片,须要等一会再跳转到下一页。
点击下一页以后,通常也是须要看下一页的图片,所点下一页后也须要停留一会。html

由于下一页这个事件在定时器里,每隔一段时间就执行一次,因此要是在这个事件里写方法,每次定时器到必定时间就执行,因此只能和定时器里的next()方法分开,因此这里写了个next2(),next2()里除了和next()里有同样的部分,还有一个就是把wait设置为0。函数

此次是定时2秒执行一次,这两秒拆分一下,循环10次,每次200毫秒,10乘以200就是2000毫秒,也就是每次两秒的速度进行定时显示图片。
加一个变量wait,wait的值是从0到10,不断循环,当等于11的时候,会进行图片切换。测试

而后在上一页和下一页里设置wait归零,这样点过上一页下一页以后,(按钮能够屡次点击切换,由于wait影响的是定时器的时间初始位置),定时器就不会很快跳转到下一页,而是循环够10个200毫秒以后才会进行切换,这就有了等待时间。spa

wait这个变量,能够控制定时器不会立刻跳转,便是点击切换后保证等两秒才会切换到下一张,且不会影响按钮自己的事件,只影响定时器的初始时间位置(定时器初始时间位置指的是wait=0后,需循环10次200毫秒的定时器才会执行切换图片)。code

测试代码:(前面的博文里有前面的代码描述,这里就加了个wait变量)htm

 <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="next2()">
 <script>
 var index=0;
 var lis=document.getElementsByTagName("li");
 var indexlength=lis.length-1;//长度-1是最后一个的索引
 var wait=0;
 var clicknext=0;
function pre(){
    index--;
    if(index<0)
    {
        index=indexlength;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
    console.log("当前显示第"+index+"pre()点击后,时间:"+(new Date()).toLocaleTimeString());
    wait=0;
};
function next(){
    index++;
    if(index>indexlength)
    {
        index=0;
    }  
    for(var i=0;i<lis.length;i++)
    {
     lis[i].className="others";
    }
    lis[index].className="now";
};
function next2(){
    next();
    wait=0;
    console.log("当前显示第"+index+"next2()点击后,时间:"+(new Date()).toLocaleTimeString());
};
var timer=setInterval(function(){
    wait++;
    if(wait>10)
    {next();
    console.log("当前显示第"+index+"张图片,时间:"+(new Date()).toLocaleTimeString());
    wait=0;
    }
    },200);
//var timer=setInterval(function(){next();var date=new Date();console.log("当前显示第"+index+"张图片,时间:"+(new Date()).toLocaleTimeString());},2000);
 </script>

图示:blog