Bootstrap写一个轮播@令狐张豪

先上Bootstrap官网下载（我这里下载的是用于生产环境的）

令狐张豪.png

Bootstrap官方下载

先引入Bootstrap的css

<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

引入jQuery

<script src="../js/jquery-3.1.1.min.js"></script>

再引入Bootstrap的js

<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

轮播代码如下↓

 <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <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>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>


            <div class="item active">
                <a href="#">
                    <img src="img/slide2.jpg" alt="第一张" width="100%">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/slide1.jpg" alt="第二张" width="100%">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/slide3.jpg" alt="第三张" width="100%">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/slide4.jpg" alt="第四张" width="100%">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/slide5.jpg" alt="第五张" width="100%">
                </a>
            </div>
            <a href="#myCarousel" data-slide="prev" class="carousel-control left">
                <!-- ‹ -->
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a><!-- 左箭头 -->
            <a href="#myCarousel" data-slide="next" class="carousel-control right">
                <!-- › -->
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a><!-- 右箭头 -->
        </div>

        <!-- //还有一小部分js代码： -->

        <script type="text/javascript">
            $(function () {
                //轮播图自动播放
                $('#myCarousel').carousel({
                    interval: 3000, //自动播放4s

                });

            });
        </script>