Bootsrap 的 Carousel

一、简介

Carousel 就是指轮播图，这里 有完整的代码例子。它可以很简单的就构造出来，结构如下：

div.carousel.slide[data-ride="carousel"]
    div.carousel-inner[role="listbox"]
        div.item.active
            img
            div.carousel-caption
        div.item
            img
            div.carousel-caption

具体代码如下。

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://www.ruanyifeng.com/images_pub/pub_345.jpg" alt="" />
            <div class="carousel-caption">
                <p>凝望世间万物</p>
            </div>
        </div>
        <div class="item">
            <img src="http://www.ruanyifeng.com/images_pub/pub_128.jpg" alt="" />
            <div class="carousel-caption">
                <p>幸与不幸，都是你</p>
            </div>
        </div>
    </div>
</div>

1. .carousel 将组件标记为轮播器，.slide 设置轮播器图片切换效果是从右向左滑动。
2. 页面加载完成后， data-ride="carousel" 确保轮播器自动启动。
3. 被标记为 .item.active 幻灯片最开始显示的幻灯片。

二、Carousel Indicators

Carousel indicators 是轮播器计数器。加上计数器后的轮播图代码结构如下：

div#generic_carousel.carousel.slide[data-ride="carousel"]
    ol.carousel-indicators
        li.active[data-target="#generic_carousel" data-slide-to="0"]
        li[data-target="#generic_carousel" data-slide-to="1"]
    div.carousel-inner[role="listbox"]
        div.item.active
            img
            div.carousel-caption
        div.item
            img
            div.carousel-caption

具体代码如下。

<div id="generic_carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#generic_carousel" data-slide-to="0" class="active"></li>
        <li data-target="#generic_carousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item">
            <img src="http://www.ruanyifeng.com/images_pub/pub_345.jpg" alt=";(" />
            <div class="carousel-caption">
                <p>凝望世间万物</p>
            </div>
        </div>
        <div class="item active">
            <img src="http://www.ruanyifeng.com/images_pub/pub_128.jpg" alt=";(" />
            <div class="carousel-caption">
                <p>幸与不幸，都是你</p>
            </div>
        </div>
    </div>
</div>

我们为 .carousel 添加了 id generic_carousel，供 .carousel-indicators 使用。

对于 carousel-indicators > li：

1. 指定 data-target 属性值为 #generic_carousel，其中 data-slide-to 为 indicator 对应的幻灯片位置（从 0 开始）。
2. 指定为 .active 的 indicator 会高亮。

三、Carousel Controls

Carousel Controls 是轮播器控制器（上一张，下一张）。加上控制器后的轮播图代码结构如下：

div#generic_carousel.carousel.slide[data-ride="carousel"]
    ol.carousel-indicators
        li.active[data-target="#generic_carousel" data-slide-to="0"]
        li[data-target="#generic_carousel" data-slide-to="1"]
    div.carousel-inner[role="listbox"]
        div.item.active
            img
            div.carousel-caption
        div.item
            img
            div.carousel-caption
    a.carousel-control.left[href="#generic_carousel" role="button" data-slide="prev"]
    a.carousel-control.right[href="#generic_carousel" role="button" data-slide="next"]

具体代码如下。

<div class="col-xs-offset-3 col-xs-6">
    <h1 class="text-center">Carousel with Controls</h1>
    <div id="generic_carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#generic_carousel" data-slide-to="0" class="active"></li>
            <li data-target="#generic_carousel" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item">
                <img src="http://www.ruanyifeng.com/images_pub/pub_345.jpg" alt="" />
                <div class="carousel-caption">
                    <p>凝望世间万物</p>
                </div>
            </div>
            <div class="item active">
                <img src="http://www.ruanyifeng.com/images_pub/pub_128.jpg" alt="" />
                <div class="carousel-caption">
                    <p>幸与不幸，都是你</p>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#generic_carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">前一张图片</span>
        </a>
        <a class="right carousel-control" href="#generic_carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">后一张图片</span>
        </a>
    </div>
</div>

添加了两个 <a> 标签，使切换幻灯片生效的是这两个属性：

1. href
2. data-slide

四、通过 JavaScript 调用

以上的代码都是通过标签 API 实现轮播图播放的。当然，也可以通过 JavaScript 调用实现。

使用 JavaScript 调用就不用再写 data-ride="carousel" 了。

$('.carousel').carousel({
    interval: 8000
});

除此之外，使用使用 JavaScript 调用还有它的好处——自定义轮播图参数，这些参数包括：

1. interval：轮播间隔时间。默认 5000，5 秒。
2. pause：默认为 "hover"。当设置为 "hover" 时，每当鼠标在幻灯片上发生 mouseenter 事件，轮播停止；mouseleave 后轮播开始。
3. wrap：默认为 true。是否循环播放轮播图。
4. keyboard：默认为 true。是否支持键盘事件。

五、Carousel 事件

轮播图轮播过程中，可以捕获到的事件有两个：

1. slide.bs.carousel：幻灯片切换开始时触发。
2. slid.bs.carousel：幻灯片切换结束时触发。

$('#generic_carousel').on('slide.bs.carousel', function () {
    // do something…
})

六、参考链接

http://getbootstrap.com/javascript/#carousel

（完）