【html】【12】特效篇--轮播图
必看参考：
http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 8 </head> 9 <body> 10 11 <div id="myCarousel" class="carousel slide"> 12 <!-- 轮播（Carousel）指标 --> 13 <ol class="carousel-indicators"> 14 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 15 <li data-target="#myCarousel" data-slide-to="1"></li> 16 <li data-target="#myCarousel" data-slide-to="2"></li> 17 </ol> 18 <!-- 轮播（Carousel）项目 --> 19 <div class="carousel-inner"> 20 <div class="item active"> 21 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> 22 </div> 23 <div class="item"> 24 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> 25 </div> 26 <div class="item"> 27 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> 28 </div> 29 </div> 30 <!-- 轮播（Carousel）导航 --> 31 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 32 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 33 <span class="sr-only">Previous</span> 34 </a> 35 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 36 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 37 <span class="sr-only">Next</span> 38 </a> 39 40 </div> 41 42 </body> 43 </html>
效果：