jquery Slide 计时不正常

Question

我正在使用 j 查询滑块，幻灯片自动切换运行良好，但是当我按下 "next" 或 "previous" 时，它不会重置幻灯片切换时间，所以有时它会到下一个滑块，只是让它在很短的时间内播放和更改。我该如何解决？

var slider = $('.slides img');
slider.hide();
slider.eq(0).show();
clickCount = 0;    

//autoplay

$(document).ready(function(){
    setInterval(function(){$(".SlNextBT").click();},6000);
 }) ;  

//next

$(".SlNextBT").click(function(){
     if(clickCount < slider.length)
           slider.eq(clickCount++).fadeOut(2100).hide();
     if(clickCount == slider.length)
         clickCount = 0;
      slider.eq(clickCount).fadeIn(2100).show();
 }) ; 

//previous

    $(".SlPreviousBT").click(function(){
         if(clickCount >= 0)
               slider.eq(clickCount--).fadeOut(2100).hide();                
         if(clickCount < 0)
             clickCount = slider.length-1;
          slider.eq(clickCount).fadeIn(2100).show();
        console.log(clickCount);
     }) ;

Answer 1

您需要重置间隔

    var slider = $('.slides img');
    var intervalHandler = null;
    slider.hide();
    slider.eq(0).show();
    clickCount = 0;    

    //autoplay

    $(document).ready(function(){
        intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000);
     }) ;  

    //next

    $(".SlNextBT").click(function(){
          clearInterval(intervalHandler);
          intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000);
         if(clickCount < slider.length)
               slider.eq(clickCount++).fadeOut(2100).hide();
         if(clickCount == slider.length)
             clickCount = 0;
          slider.eq(clickCount).fadeIn(2100).show();
     }) ; 

    //previous

        $(".SlPreviousBT").click(function(){
            clearInterval(intervalHandler);
            intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000);
             if(clickCount >= 0)
                   slider.eq(clickCount--).fadeOut(2100).hide();                
             if(clickCount < 0)
                 clickCount = slider.length-1;
              slider.eq(clickCount).fadeIn(2100).show();
            console.log(clickCount);
         }) ;

一个小例子：

var intHandler = null;
var nxt = null;
var prv = null;
$(document).ready(function() {
      nxt = $('.next');
      prv = $('.prev');
      intHandler = setInterval(function() {
        nxt.click()
      }, 4000);
      nxt.click(function() {
        alert("Hello");
        clearInterval(intHandler);
        intHandler = setInterval(function() {
          nxt.click()
        }, 4000);
      });
      prv.click(function() {
      $('.log').append("Resseted timer");
      clearInterval(intHandler);
      intHandler = setInterval(function(){nxt.click()},4000);
   });

});

button {
  width: 50px;
  height: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="next">NEXT</button>
<button class="prev">PREV</button>
<div class='log'>

</div>

点击prev，只有当你停止按下并经过4秒后，你才会看到带有next的提示

jquery Slide 计时不正常

j query Slider timing not working well

javascript

jquery

slider