Jquery轮播滑块仅在悬停时循环并在鼠标离开时停止？

Posted 2023-05-08

【中文标题】Jquery轮播滑块仅在悬停时循环并在鼠标离开时停止？

【英文标题】：Jquery carousel slider cycle only on hover and stop on mouse leave?

【发布时间】：2014-01-30 11:26:19

【问题描述】：

我想让 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>

【参考方案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

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