bootstrap实现Carousel旋转木马（焦点图）

引入bootstrap相关文件后，在html中写如下代码：

 <div class="col-lg-9" >
                     <!-- Carousel====================== -->
                     <div id="myCarousel" class="carousel slide" data-ride="carousel">
                         <!-- Indicators -->
                         <ol class="carousel-indicators">
                             <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                             <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
                             <li data-target="#myCarousel" data-slide-to="2"></li>
                         </ol>
                         <div class="carousel-inner" role="listbox">
                             <div class="item">
                                 <img
                                     src="http://gallery.myweb.com/547fcba0498e14c8d87c366e/547fd098498e14c8d87c369e.jpg"
                                     alt="First slide">
                                 <div class="container">
                                     <div class="carousel-caption">
                                     <%--     <h1>Example headline.</h1>
                                         <p>
                                             Note: If you're viewing this page via a
                                             <code>file://</code>
                                             URL, the "next" and "previous" Glyphicon buttons on the left
                                             and right might not load/display properly due to web browser
                                             security rules.
                                         </p>
                                         <p>
                                             <a class="btn btn-lg btn-primary" href="#" role="button">Sign
                                                 up today</a>
                                         </p> --%>
                                     </div>
                                 </div>
                             </div>
                             <div class="item active">
                                 <img
                                     src="http://gallery.myweb.com/547fd2e3498e14c8d87c374f/547fd2ed498e14c8d87c3750.jpg"
                                     alt="Second slide">
                                 <div class="container">
                                 <!--     <div class="carousel-caption">
                                         <h1>Another example headline.</h1>
                                         <p>Cras justo odio, dapibus ac facilisis in, egestas eget
                                             quam. Donec id elit non mi porta gravida at eget metus.
                                             Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                         <p>
                                             <a class="btn btn-lg btn-primary" href="#" role="button">Learn
                                                 more</a>
                                         </p>
                                     </div> -->
                                 </div>
                             </div>
                             <div class="item">
                                 <img
                                     src="http://gallery.myweb.com/547f32a4498e92e126340dfc/547f3839498e92e126340dfd.jpg"
                                     alt="Third slide">
                                 <div class="container">
                                     <div class="carousel-caption">
                                         <!-- <h1>希望h1> -->
                                         <!-- <p>努力奔跑躲避追赶，而全力奔跑不是为了甩掉包袱，而是守护梦想！</p> -->
                                         <!-- <p>
                                             <a class="btn btn-lg btn-primary" href="#" role="button">围观</a>
                                         </p> -->
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <a class="left carousel-control" href="#myCarousel" 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="#myCarousel"
                             role="button" data-slide="next"> <span
                             class="glyphicon glyphicon-chevron-right"></span> <span
                             class="sr-only">Next</span>
                         </a>
                     </div>
                     <!-- /.carousel -->

                 </div>