Question

我正在制作全屏旋转木马，我希望字幕是图像，我找不到合适的插件。所以我正在构建自定义解决方案。

我想出了如何在幻灯片更改期间触发事件。现在，我希望可见类在.caption

下使用div.carousel-captions循环显示div

<div id="mycarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
        <img src="images/slide2.jpg" data-color="firebrick" alt="Second Image">
    </div>
    <div class="item">
        <img src="images/slide3.jpg" data-color="violet" alt="Third Image">
    </div>
    <div class="item">
        <img src="images/slide4.jpg" data-color="lightgreen" alt="Fourth Image">
    </div>
  </div>
</div>
<div class="row">
  <div class="carousel-captions">
    <div class="caption visible">
      <img src="images/banner2-text.png" alt="" class="img-responsive" />
    </div>
    <div class="caption second">
      <img src="images/banner3-text.png" alt="" class="img-responsive" />
    </div>
    <div class="caption third">
      <img src="images/banner4-text.png" alt="" class="img-responsive" />
    </div>
  </div>
</div>

第一个标题是使用以下jquery正确隐藏但是如何循环浏览每个幻灯片的所有标题。

// Js
$('#myCarousel').on('slid.bs.carousel', function () {
  $('.caption.visible').removeClass('visible');
})

Answer 1

修改（刚刚意识到您正在使用引导程序轮播）

指明当前显示的幻灯片项目（按:visible或.active类），然后抓取索引并在同一处显示.caption索引，使用.eq(index)

$('#myCarousel').on('slid.bs.carousel', function(){
    var i = $('.item.active').index(); // or: $('.item:visible').index();
    $('.caption').removeClass('visible').eq(i).addClass('visible');
});

JSFiddle Demo

如何通过兄弟姐妹在一个事件上循环一个班级

1 个答案: