如何在悬停时暂停Bootstrap Carousel并在鼠标移出时恢复它？

Question

我的网站上有一个Bootstrap Carousel。

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

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

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

Answer 1

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

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

Answer 2

jQuery的悬停功能有这两个参数的实现 ： 在处理悬停和悬停出处理程序：

$('#foo').hover(function() {
    // handler in
}, function() {
    // handler 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));