首页 > 代码库 > Bootstrap轮播

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="http://www.mamicode.com/images/chrome-big.jpg" alt="1 slide">
</div>
<div class="item">
<img src="http://www.mamicode.com/images/firefox-big.jpg" alt="2 slide">
</div>
<div class="item">
<img src="http://www.mamicode.com/images/safari-big.jpg" alt="3 slide">
</div>
<div class="item">
<img src="http://www.mamicode.com/images/opera-big.jpg" alt="4 slide">
</div>
<div class="item">
<img src="http://www.mamicode.com/images/ie-big.jpg" alt="5 slide">
</div>
</div>
<a class="left carousel-control" href="http://www.mamicode.com/#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="http://www.mamicode.com/#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>

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

Bootstrap轮播