javascript - 如何让该幻灯片在鼠标悬停时暂停？

Question

我对 JavaScript 几乎一无所知，所以我需要你的帮助来向此幻灯片添加“鼠标悬停时暂停”功能。

$( function() {
    $( '#cbp-fwslider' ).cbpFWSlider();
} );

setInterval(function() {
    if(jQuery('.cbp-fwnext').css('display') != 'none'){
        jQuery('.cbp-fwnext').click();
    }
    else { 
        jQuery('.cbp-fwdots span:first-child').click();
    }
}, 3000);   

我找到了这张幻灯片here我添加了底部位(从另一个用户复制的)以允许它自动滚动，但我不知道如何使其在鼠标悬停时暂停。

请帮助任何人。

Answer 1

如果我正确理解您的代码，您正在使用 setInterval() 来模拟每 3 秒单击下一个按钮。因此，您可以通过让一些代码处理 mouseenter 和 mouseleave 事件来添加暂停，并设置一个 isPaused 变量，然后您的现有代码将在执行 click() 之前测试该变量。假设您希望悬停功能位于 #cbp-fwslider 元素上:

$( function() {
    var isPaused = false;

    $( '#cbp-fwslider' ).cbpFWSlider()
                        .on({
                           mouseenter: function() { isPaused = true; },
                           mouseleave: function() { isPaused = false; }
                        });

    setInterval(function() {
        if (isPaused) return; // do nothing when paused

        if(jQuery('.cbp-fwnext').css('display') != 'none')
            jQuery('.cbp-fwnext').click();
        else
            jQuery('.cbp-fwdots span:first-child').click();
    }, 3000);
});

请注意，我已将您的 setInterval() 代码移至文档就绪处理程序中，以便 isPaused 可以成为就绪处理程序中的局部变量，而不是全局变量。

(没有幻灯片的悬停暂停功能的简单演示:http://jsfiddle.net/1gf8z8yd/1/)