利用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>