轮播图

<div style="width:800px;height: 600px;margin:20px auto;"  data-interval="2000"   id="carousel-example-generic" class="carousel slide"
        data-ride="carousel">
        <!-- 指标 小点点 -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- 轮播图的主容器 -->
        <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">
                    爱的诱惑
                </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">
                    春的绽放
                </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">
                    夜的寂静
                </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>

   <!--  <button onclick="a()">123</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>