bootstrap实现Carousel旋转木马，焦点图
引入bootstrap相关文件后，在html中写如下代码：
1 <div class="col-lg-9" > 2 <!-- Carousel====================== --> 3 <div class="carousel slide" data-ride="carousel"> 4 <!-- Indicators --> 5 <ol class="carousel-indicators"> 6 <li data-target="#myCarousel" data-slide-to="0" class=""></li> 7 <li class="active" data-target="#myCarousel" data-slide-to="1"></li> 8 <li data-target="#myCarousel" data-slide-to="2"></li> 9 </ol> 10 <div class="carousel-inner" role="listbox"> 11 <div class="item"> 12 <img 13 src="http://gallery.myweb.com/547fcba0498e14c8d87c366e/547fd098498e14c8d87c369e.jpg" 14 alt="First slide"> 15 <div class="container"> 16 <div class="carousel-caption"> 17 <%-- <h1>Example headline.</h1> 18 <p> 19 Note: If you're viewing this page via a 20 <code>file://</code> 21 URL, the "next" and "previous" Glyphicon buttons on the left 22 and right might not load/display properly due to web browser 23 security rules. 24 </p> 25 <p> 26 <a class="btn btn-lg btn-primary" href="#" role="button">Sign 27 up today</a> 28 </p> --%> 29 </div> 30 </div> 31 </div> 32 <div class="item active"> 33 <img 34 src="http://gallery.myweb.com/547fd2e3498e14c8d87c374f/547fd2ed498e14c8d87c3750.jpg" 35 alt="Second slide"> 36 <div class="container"> 37 <!-- <div class="carousel-caption"> 38 <h1>Another example headline.</h1> 39 <p>Cras justo odio, dapibus ac facilisis in, egestas eget 40 quam. Donec id elit non mi porta gravida at eget metus. 41 Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 42 <p> 43 <a class="btn btn-lg btn-primary" href="#" role="button">Learn 44 more</a> 45 </p> 46 </div> --> 47 </div> 48 </div> 49 <div class="item"> 50 <img 51 src="http://gallery.myweb.com/547f32a4498e92e126340dfc/547f3839498e92e126340dfd.jpg" 52 alt="Third slide"> 53 <div class="container"> 54 <div class="carousel-caption"> 55 <!-- <h1>希望h1> --> 56 <!-- <p>努力奔跑躲避追赶，而全力奔跑不是为了甩掉包袱，而是守护梦想！</p> --> 57 <!-- <p> 58 <a class="btn btn-lg btn-primary" href="#" role="button">围观</a> 59 </p> --> 60 </div> 61 </div> 62 </div> 63 </div> 64 <a class="left carousel-control" href="#myCarousel" role="button" 65 data-slide="prev"> <span 66 class="glyphicon glyphicon-chevron-left"></span> <span 67 class="sr-only">Previous</span> 68 </a> <a class="right carousel-control" href="#myCarousel" 69 role="button" data-slide="next"> <span 70 class="glyphicon glyphicon-chevron-right"></span> <span 71 class="sr-only">Next</span> 72 </a> 73 </div> 74 <!-- /.carousel --> 75 76 </div>