轮播插件
一．轮播
轮播插件就是将几张同等大小的大图，按照顺序依次播放。
//基本实例
<div id="myCarousel" class="carousel slide" style="width:900px">
<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/slide1.png" alt="第一张">
<div class="carousel-caption">
<h3>Bootstrap</h3>
<p>Bootstrap是一款html5响应式框架</p>
</div>
</div>
<div class="item">
<img src="img/slide2.png" alt="第二张">
<div class="carousel-caption">
<h3>JQuery</h3>
<p>JQuery是一款javascript的开发库</p>
</div>
</div>
<div class="item">
<img src="img/slide3.png" alt="第三张">
<div class="carousel-caption">
<h3>Extjs</h3>
<p>Extjs是一款富客户端的js框架</p>
</div>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
data属性解释：
1.data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置；2.data-slide-to来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑动块移动到一个特定的索引，索引从0开始计数。
3.data-ride="carousel"
属性用户标记轮播在页面加载时开始动画播放。
轮播插件有三个自定义属性：
data-interval默认值5000，幻灯片的等待时间(毫秒)。如果为false，轮播将不会自动开始循环。
data-pause默认鼠标停留在幻灯片区域(hover)即暂停轮播，鼠标离开即启动轮播。data-wrap默认值true，轮播是否持续循环。
如果在JavaScript调用就直接使用键值对方法，并去掉data-；
//设置自定义属性
$('#myCarousel').carousel({
//设置自动播放2秒
interval:2000,
//设置暂停按钮的事件
pause:'hover',
//只播一次
wrap:false,
});
轮播插件还提供了一些方法，如下：
cycle循环各帧(默认从左到右)
pause停止轮播
number轮播到指定的图片上(小标从0开始，类似数组)
prev循环轮播到上一个项目
next循环轮播到下一个项目
//点击按钮执行
$('button').on('click',function(){
//点击后，自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
}
slide.bs.carousel当调用slide实例方式时立即触发该事件。slid.bs.carousel当轮播完成一个幻灯片触发该事件。
//事件
$('#myCarousel').on('slide.bs.carousel',function(){
alert('当调用slide实例方式时立即触发');
});
$('#myCarousel').on('slid.bs.carousel',function(){
alert('当轮播完成一个幻灯片触发');
});