Bootstrap中的轮播

Bootstrap中的轮播，如果您想要单独引用该插件的功能，那么您需要引用 carousel.js，当然还可以用bootstrap.js，当然还要引用jquery。代码及相关的提示如下：

<div class="container">
    <h2>轮播广告--carousel--本身结构复杂，只需要记住根--div.carousel,写完这个就跟着错误提示去做（bootlint.js）</h2>
    <h2>简单的轮播</h2>
    <div class="carousel" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/lun1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun4.jpg" alt="">
            </div>
        </div>
    </div>
    <h2>带定制效果的轮播--slider(滑动轮播)--data-interval="3000"（滑动时间间隔）-</h2>
    <div class="carousel slide" data-ride="carousel" data-interval="3000">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/lun1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun4.jpg" alt="">
            </div>
        </div>
    </div>

    <h2>广告上带说明文字的轮播广告--carousel-caption(将文字绝对定位)</h2>
    <div class="carousel slide" data-ride="carousel" data-interval="3000">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/lun1.jpg" alt="">
                <div class="carousel-caption">
                    <h4>1</h4>
                    <span>这是第一张图片</span>
                </div>
            </div>
            <div class="item">
                <img src="img/lun2.jpg" alt="">
                <div class="carousel-caption">
                    <h4>2</h4>
                    <span>这是第二张图片</span>
                </div>
            </div>
            <div class="item">
                <img src="img/lun3.jpg" alt="">
                <div class="carousel-caption">
                    <h4>3</h4>
                    <span>这是第三张图片</span>
                </div>
            </div>
            <div class="item">
                <img src="img/lun4.jpg" alt="">
                <div class="carousel-caption">
                    <h4>4</h4>
                    <span>这是第四张图片</span>
                </div>
            </div>
        </div>
    </div>

    <h2>带前进和后退按钮的轮播广告</h2>
    <div class="carousel slide" data-ride="carousel" data-interval="3000" id="carousel-example-generic">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/lun1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun4.jpg" alt="">
            </div>
        </div>
        <a href="#carousel-example-generic" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"  aria-hidden="true"></span>
        </a>
        <a href="#carousel-example-generic" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"  aria-hidden="true"></span>
        </a>
        <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>
    </div>


    <h2>带广告序号的轮播广告</h2>
    <div class="carousel slider" data-ride="carousel" data-interval="3000" id="my1">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/lun1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/lun4.jpg" alt="">
            </div>
        </div>
        <a href="#my1" class="carousel-control left" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#my1" class="carousel-control right" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        <ul class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#my1"></li>
            <li data-slide-to="1" data-target="#my1"></li>
            <li data-slide-to="2" data-target="#my1"></li>
            <li data-slide-to="3" data-target="#my1"></li>
        </ul>
    </div>
</div>

<script src="js/jquery-1.11.3.js" rel="stylesheet"></script>
<script src="js/bootstrap.min.js" rel="stylesheet"></script>
<script>
    //    用来提示自己出现的错误---只限于开发阶段使用
    (function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "js/bootlint.js";
        document.body.appendChild(s)
    })()
</script>