Javascript JQuery中的Carrousel悬停动作堆栈

我正在尝试制作一个旋转木马来更改内容（主要是图像），我正在使用（显然）指示器，用户应该能够通过悬停这些指示器（甚至不必单击它们）来更改内容。我决定使用引导carrousel，我当前的代码如下所示：

  $(document).ready(function() {

      var slideshow = $('#carousel-example-generic');

      // Fire The click event to switch slides on hover
      // But only when .next or .prev classes are not present AKA carousel is currently not animating.

      slideshow.find('li').hover(function() {
        if ((slideshow.find('.next, .prev').length === 0)){
            $(this).click();
        }
      });

     // Initialize the carousel
     slideshow.carousel();
});

$（文档）.ready（函数（）{
$（“#转盘示例通用li”）.hover（函数（）{
if（$（“#转盘示例通用li”）.hasClass（“活动”））{
$（“#转盘示例通用li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
$（“#转盘示例通用”）.carousel（$（this）.data（“幻灯片到”）；
}
});
});
#转盘示例通用{
背景色：黑色；
}
#转盘示例通用。转盘指示器{
左：自动；
宽度：自动；
左边距：自动；
}
#转盘示例通用。转盘指示器li{
显示：块；
宽度：200px；
/*我应该如何改变身高*/
高度：124px；
边界：0；
边界半径：0；
保证金：1px0；
背景色：红色；
文本缩进：0；
颜色：#fff；
}
#转盘示例通用。转盘指示器li.active{
背景图像：无；
背景色：#009fc3；
}
@媒体屏幕和屏幕（最小宽度：768px）{
#转盘示例通用。转盘指示器{
底部：自动；
}
}

一张
两个
三个
四个
第一个
然后两个
第三张幻灯片
最后一张幻灯片
我用一个简单的“超时”解决方案解决了这个问题

$(document).ready(function() {

  var itemNum = null;
  var timeoutId = null;

  $("#carousel-example-generic li").hover(
    function() {
        $("#carousel-example-generic li").removeClass("active");
        $(this).addClass("active");
        itemNum = $(this).data("slide-to")
        timeoutId = setTimeout(
            function() {
               if(itemNum != null) {
                    $("#carousel-example-generic").carousel(itemNum);
               }
         }, 200);
    }, 
    function() {
        clearTimeout(timeoutId);
    }
  );

});


“onHover”您仍然在为
li
标记删除和添加
active
类，但现在您正在为更改滑块添加超时

在超时中，您添加200毫秒的等待时间，等待所有悬停函数停止，完成后，将其更改为滑块

最后一个阶段是确保如果禁用了悬停（鼠标悬停时），则清除超时

这将使您的旋转木马美观、平滑

祝你好运
 快速回答：忘记超时，只是不要将不需要的操作推到堆栈中

不幸的是，引导旋转木马没有任何公共功能来测试它当前是否正在制作动画。但是当它改变DOM树时，它会改变DOM树。在将另一个操作推入堆栈之前，只需检查.next和.prev类是否存在

从这一点来说，这相当容易。将JavaScript代码更改为以下内容：

  $(document).ready(function() {

      var slideshow = $('#carousel-example-generic');

      // Fire The click event to switch slides on hover
      // But only when .next or .prev classes are not present AKA carousel is currently not animating.

      slideshow.find('li').hover(function() {
        if ((slideshow.find('.next, .prev').length === 0)){
            $(this).click();
        }
      });

     // Initialize the carousel
     slideshow.carousel();
});


$（文档）.ready（函数（）{
var slideshow=$（“#转盘示例通用”）；
//触发click事件以切换悬停幻灯片
//但只有当.next或.prev类不存在时，旋转木马当前未设置动画。
幻灯片放映。查找（'li'）。悬停（函数（）{
if（（slideshow.find（'.next.prev'）。长度==0））{
$（此选项）。单击（）；
}
});
//初始化旋转木马
幻灯片放映。旋转木马（）；
});
#转盘示例通用
{
背景色：黑色；
}
#转盘示例通用。转盘指示器
{
左：自动；
宽度：自动；
左边距：自动；
}
#转盘示例通用。转盘指示器li
{
显示：块；
宽度：200px；
/*我应该如何改变身高*/
高度：124px；
边界：0；
边界半径：0；
保证金：1px0；
背景色：红色；
文本缩进：0；
颜色：#fff；
}
#转盘示例通用。转盘指示器li.active
{
背景图像：无；
背景色：#009fc3；
}
@媒体屏幕和屏幕（最小宽度：768px）
{
#转盘示例通用。转盘指示器
{
底部：自动；
}
}

一张
两个
三个
四个
第一个
然后两个
第三张幻灯片
最后一张幻灯片
尝试合并jquery stop（）函数。可能重复我假设我可能已经与
.stop（）函数有关，但我不知道如何在我的代码@JinuKurian中实现它。即使我加上它，我也看不出有什么不同。我尝试在
if
语句之后和添加或删除类之前添加它。@user3834658我不想使用太高级的javascript，也不想超越JQuery所能提供的功能，因此如果可以只使用普通的JQuery，那么答案中会更喜欢它，因此不会重复。这个解决方案看起来非常好（虽然这里并没有特别提到关于动画堆栈的问题，但它实际上只是通过添加一个超时来阻止整个事情的发生。）我将看看这是否适用于我当前的旋转木马，并为您在这里所做的努力分配至少一个投票。如果没有其他答案（使用“更好”的解决方案）我会考虑你的答案这个问题的答案。谢谢。是的。它阻止了所有的事情发生。它只会发出一个幻灯片。