Bootstrap輪播插件

?

學習要點：

　　1.輪播插件

?

本節課我們主要學習一下 Bootstrap 中的輪播插件。

?

一．輪播

輪播插件就是將幾張同等大小的大圖，按照順序依次播放。

基本實例。

?

第一步，給輪播器區域div設置一個id
給輪播器區域div設置樣式carousel，slide
carousel樣式class類，寫在輪播器區域<div>里，設置輪播器區域樣式(Bootstrap)
slide樣式class類，寫在輪播器區域<div>里，設置輪播器區域樣式(Bootstrap)

?

?

第二步，設置圖片區域
carousel-inner樣式class類，寫在輪播器圖片區域<div>里，設置輪播器圖片區域樣式(Bootstrap)
item樣式class類，寫在輪播器圖片<div>里，設置輪播器圖片樣式(Bootstrap)
active樣式class類，寫在輪播器圖片<div>里，設置輪播器圖片首選(Bootstrap)

?

?

第三步，設置小圓點按鈕區域
carousel-indicators樣式class類，寫在小圓點按鈕區域<div>里，設置小圓點按鈕區域樣式(Bootstrap)
將小圓點的li標簽綁定輪播器區域div的id
data-target="#myCarousel"小圓點的li標簽綁定輪播器區域div的id(Bootstrap)
data-slide-to="0"小圓點的li標簽事件和編號默認從0開始(Bootstrap)
active樣式class類，寫在小圓點的<li>里，設置當前小圓點首選(Bootstrap)

?

?

第四步，設置向左向右箭頭
將箭頭的a標簽連接href=輪播器區域div的id進行綁定
data-slide="prev"設置左箭頭點擊事件(Bootstrap)
data-slide="next"設置右箭頭點擊事件(Bootstrap)
left樣式class類，寫在箭頭<a>里，設置箭頭左樣式(Bootstrap)
right樣式class類，寫在箭頭<a>里，設置箭頭右樣式(Bootstrap)

?

?

第五步，設置自動輪播
data-ride="carousel"寫在輪播器區域div里，設置輪播器自動輪播(Bootstrap)

<div id="myCarousel" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"> <!--3個小圓點區域--><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"> <!--3張圖片區域--><div class="item active"><img src="img/553f1.jpg" alt="第一張"></div><div class="item"><img src="img/553f2.jpg" alt="第二張"></div><div class="item"><img src="img/553f3.jpg" alt="第三張"></div></div><!--兩個向左向右箭頭--><a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a><a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a> </div>

?

?

輪播器屬性

輪播插件有三個自定義屬性：注意屬性寫在html里沒什么作用，一般寫在js里

carousel()輪播器方法，將輪播器執行輪播器方法(Bootstrap)

data-interval 默認值 5000，幻燈片的等待時間(毫秒)。如果為false，輪播將不會自動開始循環。
data-pause 默認鼠標停留在幻燈片區域(hover)即暫停輪播，鼠標離開即啟動輪播。
data-wrap 默認值 true，輪播是否持續循環。

$(function () {$('#myCarousel').carousel({//設置自動播放/2 秒interval: 1000,//設置暫停按鈕的事件pause: 'hover',//只播一次wrap: false,}); }); <div id="myCarousel" class="carousel slide"><ol class="carousel-indicators"> <!--3個小圓點區域--><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"> <!--3張圖片區域--><div class="item active"><img src="img/553f1.jpg" alt="第一張"></div><div class="item"><img src="img/553f2.jpg" alt="第二張"></div><div class="item"><img src="img/553f3.jpg" alt="第三張"></div></div><!--兩個向左向右箭頭--><a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a><a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a> </div>

?

?

輪播器方法

cycle 循環各幀(默認從左到右)
pause 停止輪播
number 輪播到指定的圖片上(小標從 0 開始，類似數組)
prev 循環輪播到上一個項目
next 循環輪播到下一個項目

$(function () {//點擊按鈕執行$('button').on('click', function () {//點擊后，自動播放$('#myCarousel').carousel('cycle');//其他雷同 }); });

?

?

輪播器事件

slide.bs.carousel 當調用 slide 實例方式時立即觸發該事件。
slid.bs.carousel 當輪播完成一個幻燈片觸發該事件。

$(function () {//事件$('#myCarousel').on('slide.bs.carousel', function () {alert('當調用 slide 實例方式時立即觸發');});$('#myCarousel').on('slid.bs.carousel', function () {alert('當輪播完成一個幻燈片觸發');}); });

?

?

給輪播圖設置文字

carousel-caption樣式class類，寫在輪播圖區域里<div>里，設置輪播圖文字區域(Bootstrap)

<div id="myCarousel" class="carousel slide"><ol class="carousel-indicators"> <!--3個小圓點區域--><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"> <!--3張圖片區域--><div class="item active"><img src="img/553f1.jpg" alt="第一張"><div class="carousel-caption"><h3>廣告錄音</h3><p>專業的廣告錄音設備，完善的錄音流程</p></div></div><div class="item"><img src="img/553f2.jpg" alt="第二張"><div class="carousel-caption"><h3>廣告錄音</h3><p>專業的廣告錄音設備，完善的錄音流程</p></div></div><div class="item"><img src="img/553f3.jpg" alt="第三張"><div class="carousel-caption"><h3>廣告錄音</h3><p>專業的廣告錄音設備，完善的錄音流程</p></div></div></div><!--兩個向左向右箭頭--><a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a><a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a> </div>

?

轉載于:https://www.cnblogs.com/adc8868/p/6813638.html

總結

以上是生活随笔為你收集整理的第二百四十八节，Bootstrap轮播插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。