利用bootstrap写图片轮播

利用bootstrap写图片轮播

缺点是轮播没有固定样式图片样式会改变外框的大小，所以要再设置 以及左右按钮的style也要从新设置

 

   <div class="carousel slide col-md-offset-3" id="myCarousel">  <!--图片轮播的外框-->

        <!--轮播底下的小圆点-->       

  　　　　<ol class="carousel-indicators">       

     　　　　 <li data-target="#myCarousel" data-side-to="0" class="active"></li>      

       　　　 <li data-target="#myCarousel" data-side-to="1"></li>      

       　　　 <li data-target="#myCarousel" data-side-to="2"></li>             <!--data-target="#myCarousel"作用就是与图片整体联系起来-->       

 　　　　 </ol>

        <!--轮播图片部分-->        

　　　　  <div class="carousel-inner">           

  　　　　　　<div class="item active">   <img src="..." alt="第一张"/>    </div>           

 　　　　　　 <div class="item">            <img src="..." alt="第二张"/>    </div>      

     　　　　   <div class="item">            <img src="..." alt="第三张"/>    </div>       

     　　　　   <div class="item">           <img src="..." alt="第四张"/>     </div>   

    　　   </div>

        <!--    轮播中的左右按钮，利用class和data-slide来与图片联系起来    在这里也要再设置左右按钮的style   -->    

   　　   <a href="#myCarousel" class="carousel-control left"  data-slide="prev">         

  　　　　　　  <span style="...">&lsaquo;</span>       

　　　　</a>     

   　　   <a href="#myCarousel" class="carousel-control right" data-slide="next" >        

     　　　　　　<span style="...">&rsaquo;</span>   

　　      </a>  

   </div>