carousel循环轮播会自动循环轮播，也可以通过按钮前进或后退，一般用于网页显著的位置，比如视频网站的首页可用此组件展示最新电影海报。

---

carousel 循环轮播

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </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>

运行一下

添加标题和描述性内容

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

运行一下

carousel循环轮播 - 参数设置

有两种方式来进行参数设置：

• 利用data-加参数名的形式构建该元素的自定义属性，比如data-interval="1000"
• 在JavaScript中使用$('#example').carousel(options)方式

常用的Options有：

参数名	数据类型	默认值	说明
interval	数字型	5000	自动轮播的间隔时间，单位为毫秒
pause	字符串或null	"hover"	自动轮播间隔时间计时暂停的触发事件，比如默认为hover即鼠标悬停时，自动轮播计时暂停，鼠标若在这悬停一辈子，就会一直显示当前页一辈子
wrap	布尔型	true	轮播结束是否继续从第一页开始而循环
keyboard	布尔型	true	选中组件状态下，是否可以通过键盘的前进后退键来控制轮播

carousel循环轮播 - JavaScript中常用方法

$("#example").carousel(option)

option命令	说明
"cycle"	开启轮播计时
"pause"	暂停轮播计时
number	直接跳到指定页（从0开始计数，0代表第一页）
"prev"	carousel循环轮播后退一页
"next"	carousel循环轮播前进一页

示例：文档加载完毕后，暂停轮播

$(document).ready(function(){
    $('#carousel-example-captions').carousel("pause");
});

运行一下

carousel循环轮播 - 事件

事件	说明
slide.bs.carousel	当一次slide滑动轮播动作开始，则触发预设事件
slid.bs.carousel	当一次slide滑动轮播动作完毕，则触发预设事件

示例：当一次slide滑动轮播动作完毕，则触发预设事件（弹出“反清复明”）

$('#carousel-example-captions').on('slid.bs.carousel', function (){
    alert( "反清复明" );
});

运行一下