觸發(fā)輪播圖的播放方法也有兩種，一種是聲明式，另外一種是JavaScript方式。首先來看聲明式方法。
聲明式方法是通過定義 data 屬性來實現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：
基于上例，設(shè)置了自定義的 data 屬性之后如下：
<div id="slidershow" class="carousel" data-ride="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> <li data-target="#slidershow" data-slide-to="4"></li> <li data-target="#slidershow" data-slide-to="5"></li> </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> … </div> <!-- 設(shè)置輪播圖片控制器 --> <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>
在這里需要注意可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感。
<div id="slidershow" class="carousel slide" data-ride="carousel">
...
</div>
這樣頁面一加載就會有輪播效果了且單擊向前向后按鈕也可以切換圖片了：
我來試試：使用聲明式方法觸發(fā)圖片輪播。
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報