Bootstrap轮播插件

轮播插件就是将几张同等大小的大图，按照顺序依次播放

<!--
分析一下轮播插件的组成：
1.最外层容器div:加类class="carousel slide"  为了不显示白色多余部分，设置宽度=图片宽度
2.轮播圆点:放在容器有序列表中，ol加类class="carousel-indicators",li加data-target="最外层容器" data-slide-to="0"（图片索引，从0开始，点击第一个圆点显示第一张，点击第三个圆点显示第三张），默认显示第一张，则加类class="active"
3.轮播内容的容器：加类class="carousel-inner",每张图片放在一个容器div中，加类item,默认显示第一张，再加class="active"，还可以加文字，放在容器div class="carousel-caption"中
4.左右切换的箭头，a标签，href="最外层容器"，加data-slide="prev/next" class="carousel-control left/right"
5.最外层容器加 data-ride="carousel" 实现自动轮播，间隔时间是5s
-->
<div id="myCarousel" class="carousel slide" style="width:690px;">
    <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/11.jpg" alt="第一张">
            <div class="carousel-caption">
                <h3>Free</h3>
                <p>I want to flee with the balloon</p>
            </div>
        </div>
        <div class="item">
            <img src="../img/22.jpg" alt="第二张">
            <div class="carousel-caption">
                <h3>Alone</h3>
                <p>I'm not alone only when I miss you</p>
            </div>
        </div>
        <div class="item">
            <img src="../img/33.jpg" alt="第三张">
            <div class="carousel-caption">
                <h3>Yes,I do</h3>
                <p>Marry me,please</p>
            </div>
        </div>
    </div>
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div>

data属性解释：
1.data-slide接受关键字prev和next，用来改变幻灯片相对于当前位置的位置
2.data-slide-to来向轮播底部创建一个原始滑动索引，data-slide-to=”2”将把滑动块移动到一个特定的索引，索引从0开始计数
3.data-ride=”carousel”属性用户标记轮播在页面加载时开始动画播放
效果图如下：

轮播插件自定义属性：

<!-- JS代码 -->
$('#myCarousel').carousel({
    // 设置自动播放--2s
    interval:2000,
    // 设置暂停轮播事件
    pause:'hover',
    // 只播一次
    wrap:false
});

轮播插件提供的方法：

<button class="btn btn-default" id="cycle">开始</button>
<button class="btn btn-default" id="pause">停止</button>
<button class="btn btn-default" id="number">第二张</button>
<button class="btn btn-default" id="prev">上一张</button>
<button class="btn btn-default" id="next">下一张</button>


<!--JS代码-->
$('#cycle').on('click',function(){
    $('#myCarousel').carousel('cycle');
});
$('#pause').on('click',function(){
    $('#myCarousel').carousel('pause');
});
$('#number').on('click',function(){
    $('#myCarousel').carousel(1);
});
$('#prev').on('click',function(){
    $('#myCarousel').carousel('prev');
});
$('#next').on('click',function(){
    $('#myCarousel').carousel('next');
});

轮播插件事件：

$('#myCarousel').on('slide.bs.carousel',function(){
    alert('当调用slide实例方式时立即触发！');
});
$('#myCarousel').on('slid.bs.carousel',function(){
    alert('当轮播完成一个幻灯片触发');
});