Bootstrap 轮播

轮播（Carousel）插件把多张图片或卡片组成一组可循环播放的幻灯片：自动播放、左右箭头、底部圆点指示器一应俱全，是首页 Banner 最常用的展示组件。

最小轮播结构

轮播需要四部分：外层容器、底部指示器、内容区 .carousel-inner、左右控制箭头：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 指示器：与每张图片一一对应 -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 幻灯片主体，item 中放图片或其它内容 -->
  <div class="carousel-inner">
    <div class="item active"><img src="img/banner1.jpg" alt="第一张"></div>
    <div class="item"><img src="img/banner2.jpg" alt="第二张"></div>
    <div class="item"><img src="img/banner3.jpg" alt="第三张"></div>
  </div>
  <!-- 左右切换箭头 -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

说明：data-ride="carousel" 让页面加载后自动播放，默认每 5 秒切换一张；底部小圆点高亮当前图片，点两侧半透明箭头可手动前后翻。

控制播放节奏与循环

用 data-interval 调整切换间隔（毫秒），data-wrap="false" 让播放到末尾后停止：

<div id="myCarousel" class="carousel slide" data-ride="carousel"
     data-interval="2000" data-wrap="false">

效果：每 2 秒切换一张，播完最后一张后停在原地，不再从头循环。

方法手动切换与暂停

jQuery 方法：cycle() 开始循环、pause() 暂停、prev() 与 next() 切换上一张或下一张：

<script>
  $('#myCarousel').carousel('pause');   // 暂停自动播放
  $('#btnGo').click(function () {
    $('#myCarousel').carousel('next');  // 点击按钮切到下一张
  });
</script>

监听切换事件

slide.bs.carousel 在开始切换前触发，slid.bs.carousel 在切换完成后触发，可用于统计曝光或联动其它内容：

<script>
  $('#myCarousel').on('slid.bs.carousel', function () {
    console.log('切换完成');
  });
</script>

小结：轮播 = 容器 + indicators 圆点 + carousel-inner 内容 + 两个 control 箭头；data-ride 开启自动播放、data-interval 调节奏，需要联动时再用 carousel() 方法与 slid 事件即可。