Question

我一直在研究这个滑块，我已经让它自动玩了一些简单的Jquery标记。我决定我可以选择转到滑块上的上一个和下一个，但我不确定是否可以使用我的设置。我有一个“下一步”按钮设置，移动到下一个图像。我的问题在于在您在代码中点击下一步后让计时器重新启动。这可能吗，我只是忽略了什么？我也想知道如何为“前一个”按钮创建“下一个”按钮的等效按钮。任何帮助都会受到赞赏，因为我一直在抨击这个问题。

这是我正在使用的Jquery：

var time = 6000;     

function play() {
    setInterval(function(){
        var next = $(".slideshow .active").removeClass("active").next(".image");
        if (!next.length) {
            next = $(".slideshow .image:first");
        }
        next.addClass("active");
    }, time);
}
play();

/*Start of function for next button  */

function forward() {
  $('.forward').click(function() {
      var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
       if (!go.length) {
         go = $(".slideshow .image:first");
       }
       go.addClass("active");
    });
}

forward();

我已经创建了一个CodePen（http://codepen.io/Develonaut/pen/lLmkc）来尝试解决这个问题。我很乐意为CodePen提供帮助。非常感谢！

Answer 1

查看clearInterval。

您需要将setInterval的返回值设置为变量，然后将该变量传递给clearInterval以重置计时器。每次按下上一个/下一个按钮，然后再次调用play功能从头开始计时器。

以下是CodePen example的更新版本。

Answer 2

做这样的事情：

存储间隔id - setInterval（）返回此值以供以后与clearInterval（）一起使用

var intervalId = setInterval(function()...

然后清除＆amp;按下按钮时重置间隔：

clearInterval(intervalId);
play();

添加“下一个”和“上一个”按钮，用于在Jquery图像滑块上重置计时器

2 个答案: