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