1

我最近修改了 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);
});

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

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

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

4

3 回答 3

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/

于 2013-06-27T16:21:49.043 回答
1

两件事：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-27T16:48:35.330 回答
0

您必须在清除它之前定义计时器。即 var timer = setInterval(autoScroller,4000);

希望这可以帮助。

于 2013-06-27T16:26:31.950 回答