Bootstrap3 轮番插件的使用方法

轮番

Bootstrap 的轮番插件（carousel.js）是一个灵活的、响应式的、无缝循环播放的幻灯片切换插件，它的内容可以是图片、视频、或者其他任何内容。

使用方法

Bootstrap中的轮番由一个 class="carousel" 的容器定义，其中包含轮番指示器、轮番内容、轮番的控制按钮。为了确保在播放时，能够对控制按钮和轮番指示器进行正常定位，需要为容器定义一个 id。如：

1. <div id="myCarousel" class="carousel">
2.   ...
3. </div>

1）轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表，用来指示轮番的播放状态，对用户表现为一系列的小圆圈，实心圆表示当前处于活动状态的轮番条目。

轮番指示器中，子元素 <li> 的个数必须与轮番内容中的元素个数相等。子元素 <li> 的 data-target 属性值指示目标对象，必须设置为轮番容器的 id 值；data-slide-to 属性指示点击小圆圈时所要播放的轮番条目的索引值（索引从 0 开始）。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如：

1. <ol class="carousel-indicators">
2.   <li data-target="#myCarousel" data-slide-to="0"></li>
3.   <li data-target="#myCarousel" data-slide-to="1"></li>
4.   <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
5. </ol>

2）轮番内容

轮番内容是一个轮番条目的列表，整个列表包含在一个 class="carousel-inner" 的容器中，列表中可以包含多个轮番条目，每个轮番条目包含在一个 class="item" 的容器中。还可以为默认处于活动状态的轮番条目添加 .active 类。默认是第一个条目处于活动状态。如果添加 .active 类，并确保它与列表指示器中定义的默认状态保持一致。

最简单的轮番内容只包含图片就可以了。如：

1. <div class="carousel-inner">
2.   <div class="item active">
3.     <img src="slide-01.jpg" />
4.   </div>
5. </div>

稍微复杂的轮番，可以通过一个 class="carousel-caption" 的容器来添加标题和说明。如：

1. <div class="carousel-inner">
2.   <div class="item active">
3.     <img src="slide-01.jpg" />
4.     <div class="carousel-caption">
5.       <h4>Second Thumbnail label</h4>
6.       <p>Cras justo odio, dapibus ...</p>
7.     </div>
8.   </div>
9. </div>

3）轮番的控制按钮

轮番的控制按钮，用来人工控制轮番的播放，它包含两个按钮，一个控制向前播放，一个控制向后播放。通过 .carousel-control 定义按钮的样式，.left 和 .right 定义按钮的方向。href 属性定义轮番包含框的 id。data-slide 属性定义播放顺序，取值 "prev" 表示播放上一个条目，取值 "next" 表示播放下一个条目。

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

至此，一个轮番就定义好了。并且，无需编写任何JavaScript代码就可以自动播放。完整代码如下：

1. <div id="myCarousel" class="carousel" style="margin-bottom:20px">
2.   <!-- Carousel indicators -->
3.   <ol class="carousel-indicators">
4.     <li data-target="#myCarousel" data-slide-to="0"></li>
5.     <li data-target="#myCarousel" data-slide-to="1"></li>
6.     <li data-target="#myCarousel" data-slide-to="2"></li>
7.   </ol>
8.   <!-- Carousel items -->
9.   <div class="carousel-inner">
10.     <div class="item">
11.       <img src="slide-01.jpg" />
12.     </div>
13.     <div class="item">
14.       <img src="slide-01.jpg" />
15.     </div>
16.     <div class="item">
17.       <img src="slide-01.jpg" />
18.     </div>
19.   </div>
20.   <!-- Carousel Controls -->
21.   <a class="carousel-control left"  href="#myCarousel" data-slide="prev">&lsaquo;</a>
22.   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
23. </div>

在轮番底部中间位置的小圆圈是轮番指示器，白色背景的圆圈指示当前活动的条目。用户可以点击任意的小圆圈，让它成为当前活动的条目。效果如图 4‑20所示：

图4-20 轮番

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。