<!DOCTYPE html>
<html>
<head>
       <title>自动轮播</title>
       <link href="/css/bootstrap.min.css" rel="stylesheet">
       <script src="/js/jquery.min.js"></script>
       <script src="/js/bootstrap.min.js"></script>
    </head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
       <!-- 轮播(Carousel)指标 -->
       <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>
       <!-- 轮播(Carousel)项目 -->
       <div class="carousel-inner" align="center">
              <div class="item active">
                     <img src="/images/1.jpg" height="200px" width="1200px" >
              </div>
              <div class="item">
                     <img src="/images/2.jpg"  height="200px" width="1200px">
              </div>
              <div class="item">
                     <img src="/images/3.jpg"   height="200px" width="1200px">
              </div>
       </div>
       <!-- 轮播(Carousel)导航 -->
       {{-- <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>--}}
       <a class="carousel-control left" href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
       <a class="carousel-control right" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
    </div>
</body>
</html>

  

posted on 2019-04-02 18:56  英勇博客  阅读(110)  评论(0编辑  收藏  举报