5-6 图片轮播（Carousel）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

图片轮播（Carousel）

插件对应的文件：carousel.js

引用地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>

样式对应的文件：

☑ LESS版本：源文件carousel.less

☑ Sass版本：源文件_carousel.scss

☑ 编译后的版本：源文件bootstrap.css第5715行～第5905行

图片轮播效果在Web中常常能看到，很多人也称之为幻灯片。其主要显示的效果就是多幅图片轮回播放，如下图所示：

上面的轮播效果是6张广告图从右向左播放，鼠标悬停在图片时会暂停播放，如果鼠标悬停或单击右下角圆点时，会显示对应的图片。这种图片轮播效果，在Bootstrap框架中是通过Carousel插件来实现，在下面小节中我们将要介绍的是如何使用Carouse插件实现图片轮播效果。

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  5.     <style>
  6.         body{padding:10px;margin:10px;}
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <div id="myCarousel" class="carousel slide">
  11.         <ol class="carousel-indicators">
  12.            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  13.            <li data-target="#myCarousel" data-slide-to="1"></li>
  14.            <li data-target="#myCarousel" data-slide-to="2"></li>
  15.         </ol>
  16.         <div class="carousel-inner">
  17.             <div class="item active">
  18.                 <img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="">
  19.                 <div class="carousel-caption">
  20.                   <h4>标题一</h4>
  21.                   <p>图片一内容简介</p>
  22.                 </div>
  23.             </div>
  24.             <div class="item">
  25.                 <img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="">
  26.                 <div class="carousel-caption">
  27.                    <h4>标题二/h4>
  28.                    <p>图片二内容简介</p>
  29.                 </div>
  30.             </div>
  31.             <div class="item">
  32.             	<img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="">
  33.                 <div class="carousel-caption">
  34.                   <h4>标题三</h4>
  35.                   <p>图片三内容简介</p>
  36.                 </div>
  37.             </div>
  38.       </div>
  39.         <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  40.         <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
  41.     </div>
  42.     <script>
  43.     $('.carousel').carousel()
  44.     </script>
  45.      <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  46.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  47.    </body>
  48. </html>
下一节