Bootstrap 旋转轮播

旋转轮播的主要显示效果就像各大网站的多幅滚动广告一样，比如天猫首页、淘宝首页、京东首页的大图标，默认情况是循环向左轮播，如果单击某一个小方块的话，会直接显示所单击的那张图。Bootstrap基于CSS3实现动画过渡效果，所以IE 8、IE 9不支持这些效果。先看示例代码：

<div data-ride="carousel" data-interval="1000" class="carousel slide" id="carousel-container"> <div class="carousel-inner"> <div class="item active"><img alt="first img" src="a.jpg" style="width: 100%"/></div> <div class="item"><img alt="second img" src="b.jpg" style="width: 100%"/></div> <div class="item"><img alt="third img" src="c.jpg" style="width: 100%"/></div> <div class="item"><img alt="fourth img" src="d.jpg" style="width: 100%"/></div> </div> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel-container" class="active"></li> <li data-slide-to="1" data-target="#carousel-container"></li> <li data-slide-to="2" data-target="#carousel-container"></li> <li data-slide-to="3" data-target="#carousel-container"></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>

说明：

最外层的div ，就是带有data-ride=“carousel”的div就是轮播插件的容器，carousel样式做样式容器，slide样式和fade类似，用来定义轮播图片的时候是否有特性，下面看其内部结构：

1、carousel-inner样式div内部包含多个含有item的div样式，在这些内部的div里，定义我们要显示的幻灯图片。
2、carousel-indicators样式ol内部定义了一组标示符，用户单击这些标示符可以直接显示相应的图片，而这些标示符上面都定义了类型dataslide-to=“2”这样的属性，其表示单击该标识符显示第3张图片（索引从0开始）。
3、另外两个a链接是一组，用于显示左右箭头，可以改变轮播的方向。注意一下，这两个元素上定义的data-slide属性值只能是prev或者next（表示上一张、下一张）。

另外：

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

2、item样式上如果有active样式的话，则表示该图正在显示，其他图片则都隐藏；提示符上的data-target和左右控制链接href里的值都一样，其表示容器元素的id（或者样式），以便后期这些元素被单击的时候，可以很方便地找到容器元素。

3、轮播插件还提供了一个字幕说明样式（carouselcaption），紧接着img元素定义即可。示例如下：

<div class=“item active”><span style="white-space:pre"></span><img src=”…” alt=”…”><span style="white-space:pre"></span><div class=“carousel-caption”><span style="white-space:pre"></span><h3>标题</h3><span style="white-space:pre"></span><p>描述…</p><span style="white-space:pre"></span></div></div>

二、除了data-ride=“carousel”、data-slide、data-slide-to以外，轮播组件还支持其他3个自定义属性，如图：

三、轮播JS用法：

如果容器定义了data-ride=“carousel"属性，则页面加载后自动开始轮播效果，如果没这个属性，也可以用JS代码来触发：

$(‘.carousel’).carousel(); // 所有带carousel样式的容器元素都开启轮播// 

或者$(‘#carousel-container’).carousel(); // 针对特定元素，开启轮播

2、carousel（）参数：

3、方法：

4、事件：