5.11.1　声明式用法

5.11.1　声明式用法

轮播的声明式用法比较复杂（应该是所有Bootstrap插件里最复杂的），但理解了它的HTML结构以后，也就不觉得复杂了。来看一下一般的声明结构和运行效果：

<div data-ride="carousel" class="carousel slide" id="carousel-container">
    <!-- 图片容器 -->
    <div class="carousel-inner">
        <div class="item"><img alt="第一张图" src="A" /></div>
        <div class="item active"><img alt="第二张图" src="B" /> </div>
        <div class="item"><img alt="第三张图" src="C" /> </div>
    </div>
    <!-- 圆圈指示符 -->
    <ol class="carousel-indicators">
        <li data-slide-to="0" data-target="#carousel-container"></li>
        <li data-slide-to="1" data-target="#carousel-container"></li>
        <li data-slide-to="2" data-target="#carousel-container" class="active"></li>
    </ol>
    <!-- 左右控制按钮 -->
    <a data-slide="prev" href="#carousel-container" class="left carousel-control">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a data-slide="next" href="#carousel-container" class="right carousel-control">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

乍一看，有很多粗体的代码，但我们来一一分析一下，就会去除畏惧心理。

首先，任何插件一般都有一个父容器，本插件也不例外，带有data-ride="carousel"的div就是轮播插件的容器，容器的id为carousel-container，稍后会用到；还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效。

然后再看其内部结构，分为以下3个部分：

❑carousel-inner样式div内部包含多个含有item的div样式，在这些内部的div里，定义我们要显示的幻灯图片。

❑carousel-indicators样式ol内部定义了一组标示符，用户单击这些标示符可以直接显示相应的图片，而这些标示符上面都定义了类型data-slide-to="2"这样的属性，其表示单击该标识符显示第3张图片（索引从0开始）。

❑另外两个a链接是一组，用于显示左右箭头，可以改变轮播的方向。注意一下，这两个元素上定义的data-slide属性值只能是prev或者next（表示上一张、下一张）。

需要特别说明的是，ol指示符元素在3个部分的位置可以任意定义，左右控制链接（a元素）可以放在ol前面，也可以放在ol后面，但是千万不能放在carousel-inner样式div的前面（会被其遮盖住）。

另外，还有几点需要再解释一下（在源码分析时容易理解）：item样式上如果有active样式的话，则表示该图正在显示，其他图片则都隐藏；提示符上的data-target和左右控制链接href里的值都一样，其表示容器元素的id（或者样式），以便后期这些元素被单击的时候，可以很方便地找到容器元素。

针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。示例如下：

<div class="item active">
    <img src="..." alt="...">
    <div class="carousel-caption">
        <h3>标题</h3>
        <p>描述...</p>
    </div>
</div>

除了data-ride="carousel"、data-slide、data-slide-to以外，轮播组件还支持其他3个自定义属性，如表5-18所示。

5.11.1　声明式用法 - 图1

上述3个自定义属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高，比如如果你在容器元素上定义时间间隔（interval）为5秒，而标示符A上定义的是3秒，那一旦你单击该标示符A以后，后续的轮播就会使用3秒作为默认设置，如果你再单击了一个没有设置时间的标示符B，那后续的轮播则又会继续使用5秒作为默认设置（后续JavaScript源码分析时请注意这一点）。

注意

Bootstrap基于CSS3实现动画过渡效果，所以IE 8、IE 9不支持这些效果。

5.11.1 声明式用法