轮播图小插件代码。简单，实用。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title> 6 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 7 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 8 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 9 </head> 10 <body> 11 12 <div id="myCarousel" class="carousel slide"> 13 <!-- 轮播（Carousel）指标 --> 14 <ol class="carousel-indicators"> 15 <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 16 <li data-target="#myCarousel" data-slide-to="1"></li> 17 <li data-target="#myCarousel" data-slide-to="2"></li> 18 </ol> 19 <!-- 轮播（Carousel）项目 --> 20 <div class="carousel-inner"> 21 <div class="item active"> 22 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> 23 </div> 24 <div class="item"> 25 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> 26 </div> 27 <div class="item"> 28 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> 29 </div> 30 </div> 31 <!-- 轮播（Carousel）导航 --> 32 <a class="carousel-control left" href="#myCarousel" 33 data-slide="prev">‹</a> 34 <a class="carousel-control right" href="#myCarousel" 35 data-slide="next">›</a> 36 </div> 37 38 </body> 39 </html>
效果图如下：
引用来源：http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-simple