Bootstrap 轮番插件

轮番

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

Bootstrap轮番插件Carousel需要 bootstrap-carousel.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-carousel.js 文件。

使用方法

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

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

1）轮番指示器

轮番指示器是一个 class="carousel-indicators" 的有序列表，用来指示有多少个轮番条目，它包含的 <li> 元素的个数，就是轮番条目的个数。还可以为默认活动的 <li> 元素添加 .active 类。bootstrap组件、如：

1. <ol class="carousel-indicators">
2.   <li class="active"></li>
3.   <li></li>
4.   <li></li>
5. </ol>

2）轮番内容

轮番内容是一个轮番条目的列表，整个列表包含在一个 class="carousel-inner" 的容器中，列表中可以包含多个轮番条目，每个轮番条目包含在一个 class="item" 的容器中。还可以为默认活动的轮番条目添加 .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。

1. <a class="carousel-control left"  href="#myCarousel">&lsaquo;</a>
2. <a class="carousel-control right" href="#myCarousel">&rsaquo;</a>

一个简单的轮番就定义完成了，完整代码如下：

1. <div id="myCarousel" class="carousel">
2.   <!-- Carousel indicators -->
3.   <ol class="carousel-indicators">
4.     <li class="active"></li>
5.     <li></li>
6.     <li></li>
7.   </ol>
9.   <!-- Carousel items -->
10.   <div class="carousel-inner">
11.     <div class="item active">
12.       <img src="slide-01.jpg" />
13.     </div>
14.     <div class="item">
15.       <img src="slide-02.jpg" />
16.     </div>
17.     <div class="item">
18.       <img src="slide-03.jpg" />
19.     </div>
20.   </div>
22.   <!-- Carousel nav -->
23.   <a class="carousel-control left"  href="#myCarousel">&lsaquo;</a>
24.   <a class="carousel-control right" href="#myCarousel">&rsaquo;</a>
25. </div>

至此，一个轮番就定义好了。并且，无需编写任何JavaScript代码，就可以自动播放。播放时，会在右上角以小圆圈来指示轮番条目的个数，并以白色背景的小圆圈来指示当前条目。用户可以点击任意的小圆圈，让它成为当前条目。效果如图 5‑19所示：

关于作者

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