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

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