javascript - jquery 幻灯片计时效果不佳

Question

我正在开发 j query slider ，幻灯片自动更改运行良好，但是当我按“下一个”或“上一个”时，它不会重置幻灯片更改时间，因此有时它只会转到下一个 slider 在很短的时间内播放和更改它。我该如何修复它？

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>

单击“上一个”，只有在停止按下并经过 4 秒后，您才会看到其中包含“下一个”的提醒