在 Jquery 图像滑块上添加一个重置计时器的下一个和上一个按钮

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

做这样的事情：

存储间隔 id - setInterval() 将其返回以供以后与 clearInterval() 一起使用

var intervalId = setInterval(function()...

然后清除并重置按下按钮时的间隔：

clearInterval(intervalId);
play();

Answer 2

查看clearInterval。

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

这是您的CodePen example 的更新版本。