我已经在这个 slider 上工作了一段时间，并且我已经让它可以使用一些漂亮的简单 Jquery 标记自动播放。我决定希望能够选择在 slider 上转到上一个和下一个，但我不确定我的设置是否可行。我设置了一个“下一个”按钮，可以移动到下一个图像。我的问题在于在代码中点击下一步后让计时器重新启动。这可以吗，我只是忽略了一些事情吗？我还想知道如何为“上一个”按钮创建相当于“下一个”按钮的功能。任何帮助将不胜感激，因为我已经为这个问题努力了一段时间了。
这是我正在使用的 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 归功于任何提供帮助的人。非常感谢!
最佳答案
查看clearInterval .
您需要将 setInterval 的返回值设置为一个变量，然后将该变量传递给 clearInterval 以重置计时器。每次按上一个/下一个按钮时都会执行此操作，然后再次调用 play 函数以从头开始计时。
这是您的 CodePen example 的更新版本.
关于javascript - 添加“下一个”和“上一个”按钮以重置 Jquery 图像 slider 上的计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24066877/