我在jquery中有一个幻灯片放映功能,我希望在特定的点击事件上停止。幻灯片功能在这里:
function slider(){
setInterval(function(){
var cur = $('img.active');
cur.fadeOut('fast');
cur.removeClass('active');
cur.css('opacity','0');
cur.addClass("hidden");
var nextimg;
if (!cur.hasClass("last")){
nextimg = cur.next("img");
}
else {
nextimg = cur.prev().prev().prev();
}
nextimg.removeClass("hidden").fadeIn('slow').css('opacity','1').addClass('active');
},5000);
}
我一直在阅读关于.queue的内容但不确定如何完全使用它,我可以从队列调用我的函数然后在点击事件中清除队列吗?我似乎无法弄清楚如果可能的话,让它工作的语法。任何关于这个或另一种方法的建议,以阻止点击运行功能将不胜感激。
答案 0 :(得分:3)
对于它的价值,通常建议使用递归的setTimeout而不是setInterval。我做了这个改变,以及一些小的语法调整。但这是我认为你想要的基本实现。
// Store a reference that will point to your timeout
var timer;
function slider(){
timer = setTimeout(function(){
var cur = $('img.active')
.fadeOut('fast')
.removeClass('active')
.css('opacity','0')
.addClass('hidden'),
nextimg = !cur.hasClass('last') ? cur.next('img') : cur.prev().prev().prev();
nextimg.removeClass('hidden')
.fadeIn('slow')
.css('opacity','1')
.addClass('active');
// Call the slider function again
slider();
},5000);
}
$('#someElement').click(function(){
// Clear the timeout
clearTimeout(timer);
});
答案 1 :(得分:1)
将setInterval的结果存储在变量中。
然后使用clearInterval来阻止它。
答案 2 :(得分:1)
存储setInterval
返回的值,说intervalId
清除它,点击处理程序应如下所示:
function stopSlider() {
//prevent changing image each 5s
clearInterval(intervalId);
//stop fading the current image
$('img.active').stop(true, true);
}