Question

我最近修改了SquareSlider（http://gilbert.pellegrom.me/recreating-the-square-slider），以便客户可以在他们的宣传片上安装AutoRotator，同时他们希望旋转器停止，如果有人在它上面盘旋。默认情况下，滚动条每4秒旋转一次。

// 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);
});

但是，在加载暂停后暂停时，它不再在页面加载时自动旋转，为了触发旋转，您必须首先将鼠标悬停在滑块上。在将页面加载到AutoRotate而不必首先悬停时，将非常感谢任何帮助。

这是我重新创建它的jsFiddle的链接。如果您加载页面，则在您首先将鼠标悬停在滑块上之前不会发生autoRotating。

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

Answer 1

你可以做到

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/

Answer 2

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

Answer 3

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

希望这有帮助。

滑块上的自定义自动旋转直到悬停才触发？

3 个答案: