轮播图源码分析

轮播图

<!--轮播图-->
<div id="myCarousel" class="carousel slide" data-ride="carousel"><!--图片容器-->
<ol class="carousel-indicators"><!--圆圈指示符-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide_01_2000x410.jpg" alt="第一张">
</div>
<div class="item">
<img src="img/slide_02_2000x410.jpg" alt="第二张">
</div>
<div class="item">
<img src="img/slide_02_2000x410.jpg" alt="第三张">
</div>
</div>
<!--左右按钮-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

源码分析

我们来逐一分析一下相关的CSS样式。 首先是容器样式carousel，它只定义了一个相对定位position:relative;，所以在使用的过程中需要再次定义该元素的高度和宽度。其次是carousel-inner样式，该样式是图片集的容器，其内部放置了多个以item为样式的div元素，主要定义了定位和默认的隐藏与显示状态。 默认情况下，所有的图片都是隐藏的，只有设置了.active样式的图片才以块级元素的方式显示出来，其位置是通过left: 0来达到左对齐的目的。carousel-control是这两个箭头的z-index高度图片容器，其定义原理主要是，在记录大容器左边和右边的15%的距离，分别显示两个a链接，然后在a链接内部定义需要显示的小图标。

然后定义a链接内部的小图标。 关于小图标，作者定义了两种样式，一种是glyphicon表示左右方向字体图标，另外一种是icon的字符图标。字体样式glyphicon-chevron-left和glyphicon-chevron-right分别代表左右箭头；同理，字符样式icon-prev和icon-next分别代表另外一种形式的左右箭头，其字符是通过在before伪类上定义的。

总结：

首先，任何插件一般都有一个父容器，本插件也不例外，带有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个部分的位置可以
4000
任意定义，左右控制链接（a元素）可以放在ol前面，也可以放在ol后面，但是千万不能放在carousel-inner样式div的前面（会被其遮盖住）。另外，还有几点需要再解释一下（在源码分析时容易理解）：item样式上如果有active样式的话，则表示该图正在显示，其他图片则都隐藏；提示符上的data-target和左右控制链接href里的值都一样，其表示容器元素的id（或者样式），以便后期这些元素被单击的时候，可以很方便地找到容器元素。针对图片，轮播插件还提供了一个字幕说明样式（carouselcaption），紧接着img元素定义即可。

注意

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