bootstrap下 图片轮播的实现

来源:互联网 发布:淘宝投诉卖家上传图片 编辑:程序博客网 时间:2024/05/01 03:28
<div class="container">
        <div data-ride="carousel" id="carousel_container" class="carousel slide">
          <!-- 图片容器 -->
          <div class="carousel-inner">
            <div class="item"><img src="images/1.jpg" style="width:500px height:100px"></div>
            <div class="item active"><img src="images/2.jpg"></div>
            <div class="item"><img src="images/3.jpg"></div>  
          </div>
          <!-- 小圆圈 -->
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel_container"></li>
            <li data-slide-to="1" data-target="#carousel_container"></li>
            <li data-slide-to="2" data-target="#carousel_container"></li>
          </ol>
          <!-- 左右按钮 -->
          <a href="#carousel_container" data-slide="prev" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>


          <a href="#carousel_container" data-slide="next" class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
          
        </div>
        
      </div>
0 0
原创粉丝点击