javascript - 如何在悬停时暂停引导轮播并在鼠标悬停时恢复它？

Question

我的网站上有一个引导轮播。

当用户将鼠标悬停在元素#formcontainer上时，我想暂停轮播。当我悬停时，我想继续旋转木马的循环。第一部分适用于以下代码，但不适用于第二部分。有人可以帮忙吗？

$(document).ready(function() {
    $('.carousel').carousel({
        interval: 1200,
        pause: "hover"
    });

    $('#formcontainer').hover(function(){
        $("#myCarousel4").carousel('pause');
    });
});

Answer 1

在事件上使用轮播cycle方法mouseleave

$('#formcontainer').hover(function(){
   $("#myCarousel4").carousel('pause');
},function(){
   $("#myCarousel4").carousel('cycle');
});

Answer 2

jQuery 的悬停函数有一个带有两个参数的实现：一个悬停处理程序和一个悬停处理程序：

$('#foo').hover(function() {
    // handler in
}, function() {
    // handler out
});

当你只传递一个参数时，你给它的函数会同时处理in和 out 事件，所以你在鼠标进入和鼠标退出时都会暂停它。

您需要将其传递给单独的处理程序：

$('#myCarousel4').hover(function() {
    $(this).carousel('pause');
}, function() {
    $(this).carousel('cycle');
});

请注意，我们可以使用this来引用轮播而不是重写它的 ID。在 jQuery 事件处理程序中，this总是指您将事件绑定到的对象（如果可能）。

Answer 3

这会奏效！

(function($) {
$(document).ready(function(){
    $('.carousel').carousel({
        pause: 'hover'
    });

}); }(jQuery));