滑块上的自定义AutoRotator不会触发,直到悬停?
问题描述:
我最近修改了SquareSlider(http://gilbert.pellegrom.me/recreating-the-square-slider),以便客户端可以在他们的promos上安装一个AutoRotator,并且如果有人在它上面悬停,他们希望旋转器停下来。默认情况下,滚动器每4秒旋转一次。滑块上的自定义AutoRotator不会触发,直到悬停?
// Automatic Rotation
var autoScroller = function(){
slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');
};
// Pause the Rotation on Hover, resume when not hovering
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval(autoScroller, 4000);
});
然而,在暂停上悬停它不再autorotates添加后在页面加载时,才能触发,你必须将鼠标悬停在滑块第一旋转。任何帮助将不胜感激,让它在页面加载AutoRotate而不是首先悬停。
这里是一个jsFiddle的链接,我已经重新创建了它。 如果加载页面,则不会发生自动旋转,直到您首先将鼠标悬停在滑块上。
答
两件事: 1)需要初始化定时器。亚伯拉罕有这个。 2)现在你的悬停将影响同一页面上的所有幻灯片。
//declare the timer
var timer = setInterval(autoScroller, 4000);
//use the already defined slider variable instead of selecting all sliders
slider.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval(autoScroller, 4000);
});
答
你可以做
var timer = setInterval(autoScroller, 4000);
// BELOW THIS COMMENT IS THE ISSUE
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval(autoScroller, 4000);
});
+0
工作完美!非常感谢你 – Dylan
非常感谢你详细阐述了亚伯拉罕的答案,虽然在这个确切的例子中我不需要,但我会选择你的答案,因为这是最佳实践。 – Dylan