Question

我正在使用aj查询滑块，幻灯片自动更改工作正常，但是当我按下“下一个”或“上一个”时，它不会重置幻灯片更改时间，因此有时会转到下一个滑块，仅让它在很短的时间内播放和改变。我该如何解决？

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);
         }) ;

一个小例子：

＆＃13;

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);
   });

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

单击上一步，只有在您停止按下并且经过4秒

后，您才能看到下一个警告

j查询滑块时序不正常

1 个答案: