JS插件-轮播图

    <!-- 轮播图的主容器 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
                style="width:100%;height: 600px;">
            <div class="carousel-caption">
                1
            </div>
        </div>
        <div class="item">
            <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
                style="width:100%;height: 600px;">
            <div class="carousel-caption">
                2
            </div>
        </div>
        <div class="item">
            <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/8b82b9014a90f6030add233a3b12b31bb051ed5a.jpg"
                style="width:100%;height: 600px;">
            <div class="carousel-caption">
                3
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<button class="btn btn-primary pause">暂停</button>
<button class="btn btn-primary prev">上一页</button>
<button class="btn btn-primary next">下一页</button>

<script src="./js/jquery-1.12.4.js"></script>
<script src="./js/bootstrap.js"></script>
<script>
    /* js比data-interval的优先级大 */
    /* $('.carousel').carousel({
        interval: 3000
    }) */
    /* 暂停轮播图的播放 */
   /*  $('.pause').click(function(){
        $('.carousel').carousel('pause')
    }) */
    /* 控制轮播图的上一页 */
    /* $('.prev').click(function(){
        $('.carousel').carousel('prev')
    }) */
    /* 控制轮播图的下一页 */
    /* $('.next').click(function(){
        $('.carousel').carousel('next')
    }) */
   /* 当轮播完成其幻灯片转换时会触发此事件 */
    $('.carousel').on('slide.bs.carousel', function () {
        console.log('我轮播了一次');
    })
</script>