jquery - twitter bootstrap carousel - 在鼠标悬停时滑动图像直到鼠标悬停

Question

我正在使用 twitter 引导轮播来显示在我的页面上滑动的图像。它工作得很好。

当我将鼠标悬停在箭头上时，我希望图像滑动，而不是在鼠标单击时滑动图像。我确实进行了更改，并且可以正常工作（如下所示）。

boostrap-carousel.js, 第 193 行 $(document).on('mouseover.carousel.data-api', '[data-slide], [data-slide-to]', 函数 (e)

但问题是 - 我希望图像一直滑动，直到鼠标移到箭头上，当我将鼠标移开时停止滑动。

你能帮我么？

Answer 1

bootstrap-carousel.js您可以使用 Javascript/jQuery 来控制轮播，而不是更改。延迟/计时器可用于重复触发轮播控件的正常左/右功能的鼠标悬停功能。

$('#myCarousel').carousel({interval:false}); /* init the carousel but don't start it */
var myInterval=false;
$('.carousel-control').mouseover(function() {
    var ctrl = $(this);
    var interval=300;

    myInterval = setInterval(function(){
         ctrl.trigger("click");
    },interval);
});

$('.carousel-control').mouseout(function(){
    clearInterval(myInterval);
    myInterval = false;
});

Bootply 上的工作演示：http: //bootply.com/Gyfhc2kCwd