jquery - 每当 Bootstrap 轮播自动循环时进行检测

Question

我试图检测 Bootstrap 轮播自动滑动的时间，但我找不到这样做的方法... slid.bs.carousel 上没有信息告诉用户是否触发了事件或是否触发了事件通过自动滚动( Bootstrap 滑动间隔)。

我尝试解决此问题的一种方法是，通过绑定(bind)一个函数来检测 bootstrap slid.bs.carousel 事件是否是由用户交互触发的，该函数会在用户触发事件后添加属性及其值，并假设如果该值不等于“滚动”，则幻灯片是自动的(参见屏幕截图)。但在这种情况下，我似乎遇到了序列错误，因为当我 console.log 事件时，我看到了该值，但一旦我尝试访问该值，它就是未定义的......这是一个插图:

Answer 1

在 Bootstrap 轮播中，当需要更改幻灯片时，将调用 Slide 函数。在幻灯片函数内部，代码触发一个名为“slide.bs.carousel”的自定义事件，并且原始 window.event 不会传递给自定义事件。即使对于计时器上的单击和滑动，也会调用相同的滑动函数。为了实现您需要的功能，您可以在传递给 on 函数的回调函数中检查 window.event。请引用这个http://codepen.io/osha90/pen/PqXGqQ笔来看看它是如何工作的。

  <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"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">

  </div>
  <div class="item">

  </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>

CSS 代码

  .item{
 width: 100%;
height: 400px; 
}
.item:first-of-type{
  background-color: pink;
}
.item:last-of-type{
  background-color: grey;
}

JS 代码

    $(function(){
    $("#carousel-example-generic").carousel();
    $("#carousel-example-generic").on('slide.bs.carousel',function(e){
      if(window.event){
        $("body").append("<p>Sliding Manually</p>");
      } else {
        $("body").append("<p>Sliding Automatically</p>");
    })    
})