Javascript 滑块上的自定义自动旋转器在悬停前不会触发？

我最近修改了SquareSlider（），这样客户可以在他们的宣传片上有一个自动旋转器，同时，如果有人在旋转器上悬停，他们希望旋转器停止。默认情况下，滚动条每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);
});

但是，在添加了pause-on-hover之后，当页面加载时，它不再自动旋转，为了触发旋转，您必须首先将鼠标悬停在滑块上。如果您能让它在pageload上自动旋转而不必先悬停，我们将不胜感激

这里有一个指向JSFIDLE的链接，我在这里重新创建了它。 如果加载页面，则在将鼠标悬停在滑块上之前，不会发生自动旋转

你可以做

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

---

在清除计时器之前，必须先定义计时器。i、 e.var定时器=设定间隔（autoScroller，4000）

希望这有帮助。

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

---

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