默認(rèn)情況之下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會自動加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下：
$(".carousel").carousel();
也可以通過容器的 ID 來指定：
$("#slidershow").carousel();
在 carousel() 方法中可以設(shè)置具體的參數(shù)，如：
|
屬性名稱 |
類型 |
默認(rèn)值 |
描述 |
|
interval |
number |
5000 |
幻燈片輪換的等待時間（毫秒）。如果為false,輪播將不會自動開始循環(huán) |
|
pause |
string |
hover |
默認(rèn)鼠標(biāo)懸停留在幻燈片區(qū)域即停止播放，離開即開始播放 |
|
wrap |
布爾值 |
true |
輪播是否持續(xù)循環(huán) |
使用時，在初始化插件的時候可以傳關(guān)相關(guān)的參數(shù)，如：
$("#slidershow").carousel({
interval: 3000
});
實(shí)際上，當(dāng)我們給carousel()方法配置參數(shù)之后，輪播效果就能自動切換。但 Bootstrap 框架中的 carousel 插件還給使用者提供了幾種特殊的調(diào)用方法，簡單說明如下：
例如，前面的調(diào)用方法，向前和向后兩個按鈕還無法正常工作，其實(shí)可以通過 .carousel("prev") 和 .carousel("next") 方法讓他們能正常工作，代碼如下：
$(function(){
$("#slidershow").carousel({
interval:2000
});
$("#slidershow a.left").click(function(){
$(".carousel").carousel("prev");
});
$("#slidershow a.right").click(function(){
$(".carousel").carousel("next");
});
});
我來試試：使用JS實(shí)現(xiàn)“圖片自動輪播”和“向前、向后按鈕”的功能實(shí)現(xiàn)
可以看到我們已經(jīng)把 data-ride="carousel" 和 data-slide="prev"、 data-slide="next" 三個語句去掉了，我們來使用JS代碼實(shí)現(xiàn)“圖片自動輪播”和“向前、向后按鈕”的功能實(shí)現(xiàn)。
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報