图片轮播--声明式触轮播图的播放（二），玩转Bootstrap（JS插件篇）教程-慕课网

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

除了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

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body{padding:10px;margin:10px;} </style> </head> <body> <div id="slidershow" class="carousel" data-ride="carousel">  <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol>  <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题1</h3> <p>描述内容1...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题2</h3> <p>描述内容2...</p> </div> </div> <div class="item"> <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a> <div class="carousel-caption"> <h3>图片标题3</h3> <p>描述内容3...</p> </div> </div> </div> <a class="left carousel-control " href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

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

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

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐