Jquery旋转木马滑块循环仅在悬停时停止鼠标离开？

Question

我想让Bootstrap Carousel循环开启：鼠标离开后悬停并暂停。我正在使用默认的Bootstrap代码库。页面上将有多个轮播使用此功能。我使用http://getbootstrap.com/2.3.2/javascript.html#carousel此链接。

我试过这段代码它在悬停时不起作用。

<script>
    $('#slider-fixed-products').carousel({interval: false});
    var myInterval = false;
    $('.slider-testimonial').mouseover(function() {
        var ctrl = $(this);
        var interval = 2000;
        myInterval = setInterval(function() {
            ctrl.trigger("click");
        }, interval);
    });
    $('.slider-testimonial').mouseout(function() {
        clearInterval(myInterval);
        myInterval = false;
    });
</script>

Answer 1

当您将鼠标悬停在任一控件（左/右箭头）上时，可以使用以下链接滑动。

$('#myCarousel').carousel({
    interval: false
});
var i;
$('.carousel-control')
        .on("mouseover", function() {
            var control = $(this),
                    interval = 500;
            i = setInterval(function() {
                control.trigger("click");
            }, interval);
        })
        .on("mouseout", function() {
            clearInterval(i);
        });

fiddle

这适用于同一页面上的多个轮播。