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