滑块上的自定义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的链接，我已经重新创建了它。如果加载页面，则不会发生自动旋转，直到您首先将鼠标悬停在滑块上。

http://jsfiddle.net/dylanbaumann/RSP2z/

来源

2013-06-27 Dylan

两件事： 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); 
    });

来源

2013-06-27 16:48:35 scaryman

非常感谢你详细阐述了亚伯拉罕的答案，虽然在这个确切的例子中我不需要，但我会选择你的答案，因为这是最佳实践。 – Dylan

你可以做

var timer = setInterval(autoScroller, 4000); 
    // BELOW THIS COMMENT IS THE ISSUE 
    $('.square-slider').hover(function(ev){ 
     clearInterval(timer); 
    }, function(ev){ 
     timer = setInterval(autoScroller, 4000); 
    });

http://jsfiddle.net/RSP2z/6/

来源

2013-06-27 16:21:49

工作完美！非常感谢你 – Dylan

你必须清除之前定义定时器。即var timer = setInterval（autoScroller，4000）;

希望这会有所帮助。

来源

2013-06-27 16:26:31 ElliotM

这似乎是问题，谢谢！ – Dylan

滑块上的自定义AutoRotator不会触发，直到悬停？

回答

相关问题