5-12 图片轮播--声明式触轮播图的播放（二）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

图片轮播--声明式触轮播图的播放（二）

除了data-ride="carousel"、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性：

属性名称

类型

默认值

描述

data-interval

number

5000

幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环

data-pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放

data-wrap

布尔值

true

轮播是否持续循环

如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
   ......
</div>

上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。

任务

我来试试：设置图片轮播时间间隔为2秒。

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.  
  11.   <div id="slidershow" class="carousel" data-ride="carousel">
  12.     <!-- 设置图片轮播的顺序 -->
  13.     <ol class="carousel-indicators">
  14.         <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
  15.         <li data-target="#slidershow" data-slide-to="1">2</li>
  16.         <li data-target="#slidershow" data-slide-to="2">3</li>
  17.     </ol>
  18.     <!-- 设置轮播图片 -->
  19.     <div class="carousel-inner">
  20.         <div class="item active">
  21.             <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
  22.             <div class="carousel-caption">
  23.                 <h3>图片标题1</h3>
  24.                 <p>描述内容1...</p>
  25.             </div>
  26.         </div>
  27.         <div class="item">
  28.             <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
  29.             <div class="carousel-caption">
  30.                 <h3>图片标题2</h3>
  31.                 <p>描述内容2...</p>
  32.             </div>
  33.         </div>
  34.         <div class="item">
  35.             <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
  36.             <div class="carousel-caption">
  37.                 <h3>图片标题3</h3>
  38.                 <p>描述内容3...</p>
  39.             </div>
  40.         </div>
  41.     </div>
  42.     <a class="left carousel-control " href="#slidershow" role="button" data-slide="prev">
  43.         <span class="glyphicon glyphicon-chevron-left"></span>
  44.     </a>
  45.     <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
  46.         <span class="glyphicon glyphicon-chevron-right"></span>
  47.     </a>
  48.   </div>
  49.   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  50.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  51.   </body>
  52. </html>
下一节