Question

我创建了一个自动滑动的旋转木马每5秒钟（以及手动按钮移动幻灯片）。我希望能够在鼠标悬停在幻灯片上时暂停滚动，并在鼠标不再悬停时恢复。

到目前为止，我的脚本将执行以上所有操作但是，它不会在页面加载时启动，您必须将鼠标悬停在然后取消悬停才能启动。

这是我的剧本：

jQuery('#viewport').hover(function () {
    window.clearInterval(timer);
}, function () {
    timer = window.setInterval(function () {
        jQuery('#next').trigger('click');
    }, 1000);
});

我该怎么做才能让它立即开始滑动？

Answer 1

jQuery('#viewport').on({
    mouseenter: function() {
        clearInterval( $(this).data('timer') );
    },
    mouseleave: function() {
        $(this).data('timer', setInterval(function () {
            jQuery('#next').trigger('click');
        }, 1000));
    }
}).trigger('mouseleave');

Answer 2

function nextSlide () {
   jQuery('#next').trigger('click');
} 

jQuery('#viewport').hover(function() {
  window.clearInterval(timer);    
}, function() {
  timer = window.setInterval(nextSlide, 1000);
});

nextSlide();

Answer 3

包裹所有内容

$(document).ready(function()
{
    // Your code there.
});

hover上的clearInterval和setInterval onmouseout

3 个答案: