一.輪播
輪播插件就是將幾張同等大小的大圖霍弹,按照順序依次播放。
//基本實(shí)例娃弓。
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.png" alt="第一張">
</div>
<div class="item">
<img src="img/slide2.png" alt="第二張">
</div>
<div class="item">
<img src="img/slide3.png" alt="第三張">
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control
left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control
right">›</a>
</div>
輪播圖
data 屬性解釋:
1.data-slide 接受關(guān)鍵字 prev 或 next典格,用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的置;
2.data-slide-to 來(lái)向輪播底部創(chuàng)建一個(gè)原始滑動(dòng)索引台丛,data-slide-to="2"將把滑
動(dòng)塊移動(dòng)到一個(gè)特定的索引耍缴,索引從 0 開(kāi)始計(jì)數(shù)砾肺。
3.data-ride="carousel"屬性用戶標(biāo)記輪播在頁(yè)面加載時(shí)開(kāi)始動(dòng)畫(huà)播放。
輪播插件有三個(gè)自定義屬性:
自定義屬性
如果在 JavaScript 調(diào)用就直接使用鍵值對(duì)方法防嗡,并去掉 data-变汪;
//設(shè)置自定義屬性
$('#myCarousel').carousel({
//設(shè)置自動(dòng)播放/2 秒
interval : 2000,
//設(shè)置暫停按鈕的事件
pause : 'hover',
//只播一次
wrap : false,
});
輪播插件還提供了一些方法,如下:
輪播提供的其他方法
//點(diǎn)擊按鈕執(zhí)行
$('button').on('click', function () {
//點(diǎn)擊后蚁趁,自動(dòng)播放
$('#myCarousel').carousel('cycle');
//其他雷同
}
事件
//事件
$('#myCarousel').on('slide.bs.carousel', function () {
alert('當(dāng)調(diào)用 slide 實(shí)例方式時(shí)立即觸發(fā)');
});
$('#myCarousel').on('slid.bs.carousel', function () {
alert('當(dāng)輪播完成一個(gè)幻燈片觸發(fā)');
});