在jQuery轮播中重置计时器

I have a carousel that works fine, the only problem i have is when I click the controls the timer doesn't stop. I have a loop that is inside the timer that changes the image. When I click on of the controls I can change my current active carousel image but the timer is not reset.

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

Here is my jQuery:

这是我的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();

    });
});

And here is my jsFiddle for more information.

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

1 个解决方案

#1

1) Define your $interval var first before using it. 2) Clear any previous intervals before you set one. 3) Clear interval when the controls are being clicked on.

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

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

Within the click function

在点击功能内

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

This is how you reset the timer. But, you may want an option, such as a play button, to reactivate the timer in case you'd like to init auto play again. Hence, it'd be best to move your code from within interval to a function and call it as and when you need it, like below.

这是您重置计时器的方法。但是,您可能需要一个选项,例如播放按钮,以便在您想要再次启动自动播放时重新激活计时器。因此,最好将代码从区间内移动到函数中,并在需要时将其调用,如下所示。

// ...
// ...
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

So, here is a dirty version with the play button, which would reactivate auto play when clicked. Take a look at this fiddle for the code/demo.

所以,这是一个带有播放按钮的脏版本,它会在点击时重新激活自动播放。看看这个代码/演示的小提琴。

#1