javascript - JQuery 中的 Carrousel 悬停 Action 堆栈

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

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

Answer 1

我使用简单的“超时”解决方案解决了这个问题。

$(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

“onHover”您仍然为 li 标签删除和添加 active 类，但现在您要为更改 slider 添加超时。

在超时中，您添加了 200 英里的等待时间，以便所有悬停功能停止，当它全部完成后，您将其更改为 slider 。

最后一个阶段是确保如果悬停被禁用(在鼠标移开时)，您将清除超时。

这将使您的旋转木马美观流畅。

祝你好运!