圖片輪播--聲明式觸輪播圖的播放（二）
除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性：
|
屬性名稱
|
類型
|
默認(rèn)值
|
描述
|
|
data-interval
|
number
|
5000
|
幻燈片輪換的等待時(shí)間（毫秒）。如果為false,輪播將不會(huì)自動(dòng)開始循環(huán)
|
|
data-pause
|
string
|
hover
|
默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放
|
|
data-wrap
|
布爾值
|
true
|
輪播是否持續(xù)循環(huán)
|
如下代碼實(shí)現(xiàn)“輪播不持續(xù)循環(huán)”和“輪播時(shí)間間隔為1秒”。
<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div>
上面三個(gè)屬性可以在容器元素上定義，也可以在標(biāo)示符（或左右控制鏈接）上定義，但是后者定義的優(yōu)先級(jí)比較高。
任務(wù)
我來試試：設(shè)置圖片輪播時(shí)間間隔為2秒。
<!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">
<!-- 設(shè)置圖片輪播的順序 -->
<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>
<!-- 設(shè)置輪播圖片 -->
<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>圖片標(biāo)題1</h3>
<p>描述內(nèi)容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>圖片標(biāo)題2</h3>
<p>描述內(nèi)容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>圖片標(biāo)題3</h3>
<p>描述內(nèi)容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>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
