如何在悬停时暂停 Bootstrap 轮播并在鼠标移出时恢复?

How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?

我的网站上有一个 Bootstrap 轮播。

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

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

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

mouseleave 事件上使用 carousel cycle 方法

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

jQuery 的 hover function has an implementation that takes two arguments:悬停 in 处理程序和悬停 out 处理程序:

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

当你传递它时 just one argument,你给它的函数处理 in 和 out 事件,所以你在鼠标输入和鼠标上暂停它出。

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

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

请注意,我们可以使用 this 来引用轮播而不是重写其 ID。在 jQuery 事件处理程序中,this 始终引用您将事件绑定到的对象。

这行得通!

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

}); }(jQuery));