Carrousel悬停动作堆栈在JQuery中

Question

我正在尝试制作改变内容（主要是图像）的转盘，我正在使用（显然）指标，用户应该能够通过悬停这些指标来改变内容（甚至不必点击它们）实现这一目标。我决定使用Bootstrap carrousel，我现在的代码现在看起来像这样：

$(document).ready(function() {
  $("#carousel-example-generic li").hover(function() {
    if ($("#carousel-example-generic li").hasClass("active")) {
      $("#carousel-example-generic li").removeClass("active");
      $(this).addClass("active");
      $("#carousel-example-generic").carousel($(this).data("slide-to"));
    }
  });
});

#carousel-example-generic {
  background-color: black;
}
#carousel-example-generic .carousel-indicators {
  left: auto;
  width: auto;
  margin-left: auto;
}
#carousel-example-generic .carousel-indicators li {
  display: block;
  width: 200px;
  /* How should I change height?: */
  height: 124px;
  border: 0;
  border-radius: 0;
  margin: 1px 0 0 0;
  background-color: red;
  text-indent: 0;
  color: #fff;
}
#carousel-example-generic .carousel-indicators li.active {
  background-image: none;
  background-color: #009fc3;
}
@media screen and (min-width: 768px) {
  #carousel-example-generic .carousel-indicators {
    bottom: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">One</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
    <li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        First one
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Then two
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Third slide
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Last slide
      </div>
    </div>
  </div>

  <!-- Controls -->
  <!--
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  -->
</div>

JSFiddle

问题在于，使用此代码时，每次将鼠标悬停在指标上时，每次发生悬停时，它都会作为操作存储在“队列”或“堆栈”中。因此，如果我用光标在指示器上方快速上下移动，旋转木马仍会尝试执行“保存”的每个操作？在那个“队列”或“堆栈”中。有没有人可以解释我发生了什么以及如何让我的想法正常工作（防止行动被“堆积”）并立即转到下一个“幻灯片”悬停？是否可以使解决方案接近我使用的JQuery，即我正在使用已经在其上运行Bootstrap JavaScript的Bootstrap carrousel指示器？

Answer 1

我使用简单的＆＃34;超时＆＃34;解决了这个问题。溶液

$(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);
    }
  );

});

JSFiddle

＆＃34; onHover选项＆＃34;您仍然删除并添加active代码的li类，但现在您正在添加更改滑块的超时。

在超时时间内，您需要为所有悬停功能添加200毫秒的等待时间，并在完成所有操作后，将其更改为滑块。

最后阶段是确保如果禁用悬停（鼠标移出时），则清除超时。

这将使您的转盘变得美观和光滑。

祝你好运！

Answer 2

快速回答：忘记超时，不要将不需要的操作推到堆叠状态。

可悲的是，Bootrapps Carousel没有任何公共功能可以测试它当前是否具有动画功能。但它会改变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();
});

$(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();
});

#carousel-example-generic
{
  background-color: black;
}

#carousel-example-generic .carousel-indicators
{
    left: auto;
    width: auto;
    margin-left: auto;
}

#carousel-example-generic .carousel-indicators li
{
    display: block;
    width: 200px;
    /* How should I change height?: */
    height: 124px;
    border: 0;
    border-radius: 0;
    margin: 1px 0 0 0;
    background-color: red;
    text-indent: 0;
    color: #fff;
}

#carousel-example-generic .carousel-indicators li.active
{
    background-image: none;
    background-color: #009fc3;
}

@media screen and (min-width: 768px)
{
    #carousel-example-generic .carousel-indicators
    {
        bottom: auto;
    }
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">One</li>
    <li data-target="#carousel-example-generic" data-slide-to="1">Two</li>
    <li data-target="#carousel-example-generic" data-slide-to="2">Three</li>
    <li data-target="#carousel-example-generic" data-slide-to="3">Four</li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        First one
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Then two
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Third slide
      </div>
    </div>
    <div class="item">
      <img src="https://i.gyazo.com/c5db60017df38a133a6f126a2d6ea691.png" alt="...">
      <div class="carousel-caption">
        Last slide
      </div>
    </div>
  </div>

  <!-- Controls -->
  <!--
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  -->
</div>

- 脚注： 你使用carousel插件有点不对劲。每次悬停交换机时，您的代码都会初始化插件。此外，“滑动到”功能内置于数据属性中，因此它足以在相应的开关（li）上触发“虚拟”点击事件，插件将完成剩下的工作。