Question

我有5张幻灯片，这些幻灯片在5秒后或点击鼠标时会发生变化（使用SetInterval函数完成，触发“点击”）

问题如下，例如：让我们说它设置为＃slide_1，当4秒过去时我手动点击＃slide_2，下一张幻灯片（＃slide_3）在1秒后激活。它是所有SetInterval，触发点击，我不知道如何在手动和SetInterval点击之间再次添加5秒间隔..

这是我的代码，

    setInterval(function() {
       if(!$('.buttons > ul ').children('.butt_press').next().length){
            $('.buttons > ul').children(':first').trigger('click');
       }
       else{
            $('.buttons > ul').children('.butt_press').next().trigger('click');
       }
   }, 5500);

感谢

Answer 1

setInterval返回一个间隔ID，您可以使用它来清除间隔，然后重新创建它。

var nextSlide = function () {
   if(!$('.buttons > ul ').children('.butt_press').next().length){
        $('.buttons > ul').children(':first').trigger('click');
   } else {
        $('.buttons > ul').children('.butt_press').next().trigger('click');
   }
};

var interval = setInterval(nextSlide, 5000);

$('some_selector').on('click', function () {
  nextSlide();
  clearInterval(interval);
  interval = setInterval(nextSlide, 5000);
});

Jquery幻灯片效果，点击后需要延迟

1 个答案: