利用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="...">‹</span>
</a>
<a href="#myCarousel" class="carousel-control right" data-slide="next" >
<span style="...">›</span>
</a>
</div>