Question

我有一个包含3个视频的旋转木马。当旋转木马翻转3个视频时，用户可以通过点击它来播放活动视频。当轮播转到下一个视频时，用户需要能够在暂停“非活动”视频时点击新的活动视频。我知道如何选择活动视频，但如何选择不活动的视频？

这是jquery：

$('div.carousel-inner div.active').click(function(){
  $('div.carousel-inner div.active video').get(0).play()
  $('div.carousel-inner not([div.active)]').get(0).stop()
}

这是bootstrap轮播代码：

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">Video 1</li>
    <li data-target="#myCarousel" data-slide-to="1">Video 2</li>
    <li data-target="#myCarousel" data-slide-to="1">Video 3</li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item"><video>VIDEO1.MOV<video></div>
    <div class="item"><video>VIDEO2.MOV</video></div>
    <div class="item"><video>VIDEO3.MOV</video></div>
  </div>

  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Answer 1

我想你想要：

$('div.carousel-inner .item:not(.active)').get(0).stop()

Answer 2

你可以这样优化：

$('div.carousel-inner div.active').click(function(){
  $(this).get(0).play();
  $(this).siblings().not('.active').get(0).stop();
}

Bootstrap轮播 - 需要一个否定选择器

2 个答案: