Question

我在JavaScript上几乎没用，所以我需要你的帮助来添加一个＆＃34;暂停鼠标悬停＆＃34;这个幻灯片的特色。

$( 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/）

如何在幻灯片鼠标悬停时暂停此幻灯片？

1 个答案: