用bootstrap实现图片的轮播

记得导入bootstrap.css,如果出现无法显示图标的情况，参见我的另一篇博文。

<!--图片轮播-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!--轮播图片的提示点-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" ></li>
<li data-target="#carousel-example-generic" data-slide-to="2" ></li>
</ol>
<!--轮播图片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../images/carousel1.jpg" alt="1">
<div class="carousel-caption">
<h4>教学天地</h4><!--可以设置浮动在图片上面的文字-->
<p>这个大学是华南地区唯一一所医药大学</p>
</div>
</div>
<div class="item ">
<img src="../images/carousel2.jpg" alt="2">
<div class="carousel-caption"></div>
</div>
<div class="item ">
<img src="../images/carousel2.jpg" alt="3">
<div class="carousel-caption"></div>
</div>
</div>
<!--左右滑动图标-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>