将计时器重置在jQuery旋转木马中

Question

我有一个可正常工作的轮播，唯一的问题是单击控件时，计时器不会停止。我有一个在计时器内部更改图像的循环。当我单击控件时，我可以更改当前的活动旋转木马映像，但计时器不是重置的。

这是我的jQuery：

$(document).ready(function () {
    var $slider = $('.slider');
    var $slide = 'li';
    var $transition_time = 2000;
    var $time_between_slides = 5000;
    var $btn = $('.buttons');
    var $buttonanchor = 'li';
    function slides() {
        return $slider.find($slide);
    }
    slides().fadeOut();
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);
    function button() {
        return $btn.find($buttonanchor);
    }
    button().first().addClass('btnactive');
    $interval = setInterval(
    function () {
        var $i = $slider.find($slide + '.active').index();
        slides().eq($i).removeClass('active');
        button().eq($i).removeClass('btnactive');
        button().eq($i).addClass('buttonsnotactive');
        slides().eq($i).fadeOut($transition_time);
        if (slides().length == $i + 1) $i = -1; // loop to start
        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
        button().eq($i + 1).addClass('btnactive');
    }, $transition_time + $time_between_slides);
    $('.buttons li').click(function (event) {
        var $i = $(this).index();
        $('.buttons li').removeClass('btnactive');
        $(this).addClass('btnactive');
        $('.slider li').fadeOut($transition_time);
        $('.slider li').removeClass('active');
        $('.slider li').eq($i).fadeIn($transition_time);
        $('.slider li').eq($i).addClass('active');
        event.preventDefault();
    });
});

这是我的JSFiddle，以获取更多信息。

Answer 1

1）在使用之前先定义您的 $interval var。2）在设置一个间隔之前清除任何以前的间隔。3）单击控件时清晰的间隔。

// ....
// .... 
button().first().addClass('btnactive');
// -- Added --
var $interval = 0;
clearInterval($interval);
// -- ; --
$interval = setInterval(
// .... 

在点击函数中

$('.buttons li').click(function (event) {
    // Added
    clearInterval($interval);
    // --; --

这就是您重置计时器的方式。但是，您可能需要一个选项，例如播放按钮，以重新激活计时器，以防您要再次启动自动播放。因此，最好将您的代码从内部内部移动到函数，并在需要时称其为按下。

。

// ...
// ...
button().first().addClass('btnactive');
var slideMe = function() {
    var $i = $slider.find($slide + '.active').index();
    slides().eq($i).removeClass('active');
    button().eq($i).removeClass('btnactive');
    button().eq($i).addClass('buttonsnotactive');
    slides().eq($i).fadeOut($transition_time);
    if (slides().length == $i + 1) $i = -1; // loop to start
    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
    button().eq($i + 1).addClass('btnactive');
};
// -- Added --
var $interval = 0;
clearInterval($interval);
// -- ; --
$interval = setInterval(slideMe, $transition_time + $time_between_slides);
// ...
// ...

demo@fiddle

因此，这是一个带有播放按钮的肮脏版本，当单击时，它将重新激活自动播放。看看代码/演示的此小提琴。