Bootstrap轮播

实现原理：隐藏所有要显示的元素，然后指定要显示的为block，宽、高自适应。

结构：

容器：最外层为一个div 使用data-ride="carousel" 来指定为轮播插件。并提供一个id，方便圆圈指示符的关联。

圆圈指示符：ol 列表 ，每个列表指定data-slide-to="0/1/2/3/..."，用于标记当前圆圈的索引号。

图片列表：最外层一个div，每一个img被一个div ,class="item"包裹住。

css样式：

Carousel：只有一个相对定位标记

Carousel-inner：旋转图片列表区域，其中每项有item来修饰

其中的active、next、prev都认为是可见的

Carousel-caption：表示每个item项应该有标题信息，默认显示下、中位置

Carousel-control：设置向左、向右按钮的样式，其中会设置渐变、透明度等信息，提供了icon-prev、icon-next两种额外样式

Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体

<div id="ad-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#ad-carousel" data-slide-to="1"></li>
        <li data-target="#ad-carousel" data-slide-to="2"></li>
        <li data-target="#ad-carousel" data-slide-to="3"></li>
        <li data-target="#ad-carousel" data-slide-to="4"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="data:images/chrome-big.jpg" alt="1 slide">
        </div>
        <div class="item">
            <img src="data:images/firefox-big.jpg" alt="2 slide">
        </div>
        <div class="item">
            <img src="data:images/safari-big.jpg" alt="3 slide">
        </div>
        <div class="item">
            <img src="data:images/opera-big.jpg" alt="4 slide">
        </div>
        <div class="item">
            <img src="data:images/ie-big.jpg" alt="5 slide">
        </div>
    </div>
    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
            class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span></a>
</div>

原文地址：http://www.jb51.net/article/86421.htm