[英]Resetting the timer in a jQuery carousel
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) Define your $interval
var first before using it. 1)在使用前先定义
$interval
变量。 2) Clear any previous intervals before you set one. 2)在设置一个间隔之前,请清除所有以前的间隔。 3) Clear interval when the controls are being clicked on.
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);
// ...
// ...
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.
看一下有关代码/演示的小提琴 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.