如何在悬停时暂停引导轮播并在鼠标悬停时恢复它？

Posted 2023-05-08

【中文标题】如何在悬停时暂停引导轮播并在鼠标悬停时恢复它？

【英文标题】：How can I pause a Bootstrap Carousel on hover and resume it on mouse-out?

【发布时间】：2017-04-24 23:56:10

【问题描述】：

我的网站上有一个引导轮播。

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

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

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

【参考方案1】：

在mouseleave 事件上使用carousel cycle 方法

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

【参考方案2】：

jQuery 的hover 函数有an implementation that takes two arguments：一个悬停in 处理程序和一个悬停out 处理程序：

$('#foo').hover(function() 
    // handler in
, function() 
    // handler out
);

当您将其传递给just one argument 时，您为其提供的函数处理输入和输出事件，因此您在鼠标进入和鼠标退出时都会暂停它。

您需要将其传递给单独的处理程序：

$('#myCarousel4').hover(function() 
    $(this).carousel('pause');
, function() 
    $(this).carousel('cycle');
);

请注意，我们可以使用this 来引用轮播而不是重写它的ID。在 jQuery 事件处理程序中，this 始终指代您将事件绑定到的对象。

【讨论】：

奇怪的是，这显然不是最完整的答案。

【参考方案3】：

这行得通！

(function($) 
$(document).ready(function()
    $('.carousel').carousel(
        pause: 'hover'
    );

); (jQuery));