Bootstrap學習日記之輪播外掛
阿新 • • 發佈：2018-11-10
輪播外掛概述
當你在瀏覽某些很酷的網站時，你會注意到好的網站都有這麼一個功能，圖片或者視訊在首頁位置，如幻燈片一樣，在輪播。
在Bootstrap中也有支援輪播的外掛carousel。這是一種非常靈活的響應式的向站點新增滑塊的方式，它可放置一切內容，如圖片視訊框架等。
建立輪播
- 建立內容容器，搭配Bootstrap中的網格系統實現更理想化佈局
- 建立輪播內容容器<div>，class="carousel slide"，並賦予唯一ID
- 在輪播內容容器中，建立輪播指標無序列表<ol>，class="carousel-indicators"，
- 在無序列表中建立輪播指標<li data-target="#ID" data-slide-to="*"></li>------*為數字，從0~n;
- 有多少條輪播專案就有多少條<li>
- 在輪播內容容器中，建立輪播專案容器<div>，class="catousel-inner"
- <div class="item"><img src="..." alt="* slide"></div>
- 在輪播內容容器中建立用於表示上一頁下一頁的超連結按鈕（這裡用到了Bootstrap中的徽章）
例項
<div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <!--建立輪播指標--> <div class="carousel slide" id="myCarousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slied-to="0" class="active"></li> <li data-target="#myCarousel" data-slied-to="1"></li> <li data-target="#myCarousel" data-slied-to="2"></li> </ol> <!--建立輪播專案--> <div class="carousel-inner"> <div class="item active"> <img src="img/背景1.png" width="700px" height="400px" > </div> <div class="item"> <img src="img/背景2.png" width="700px" height="500px" > </div> <div class="item"> <img src="img/背景3.png" width="700px" height="500px"> </div> </div> <!--建立輪播導航--> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div>
程式碼解讀：
<div class="carousel slide" id="目標ID">
<!--建立輪播指標-->
<ol class="carousel-indicators">
<li data-target="#目標ID" data-slide-to="*"></li> <!--*為阿拉伯數字-->
........ <!--有多少條輪播專案就有多少條<li>-->
</ol>
<!--建立輪播專案-->
<div class="carousel-inner">
<div class="item">
<img src="...." >
</div>
<div class="item">
<img src="...." >
</div>
.......
</div>
<!--建立輪播導航-->
<a class="left carousel-control" href="#目標ID" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#目標ID" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--輪播導航結束-->
</div>執行結果
帶有標題文字（描述輪播專案）的輪播
建立這個只需要在<div class="item">中新增帶有class="catousel-caption"便可新增標題
案例
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<!--向輪播專案新增標題-->
<div class="carousel-caption">標題1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<!--向輪播專案新增標題-->
<div class="carousel-caption">標題二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<!--向輪播專案新增標題-->
<div class="carousel-caption">標題三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
執行結果
選項
方法
在輪播外掛中，方法的存在是為了控制輪播，比如手動控制上一頁下一頁（這個通過輪播導航也能實現），暫停輪播等，使用方法也很簡單，通過<input>定義控制按鈕（建立自定義類），在Java Script中進行相應的處理。
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<div class="carousel-caption">標題1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<div class="carousel-caption">標題二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<div class="carousel-caption">標題三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--輪播控制按鈕-->
<div style="text-align: center">
<input type="button" class="btn start-slide" value="初始化輪播">
<input type="button" class="btn pause-slide" value="停止輪播">
<input type="button" class="btn" id="previous-slide" value="上一頁">
<input type="button" class="btn next-slide" value="下一頁">
<input type="button" class="btn slide-one" value="第一張">
<input type="button" class="btn slide-two" value="第二張">
<input type="button" class="btn slide-three" value="第三張">
</div>
</div>
</div>
</div>
<script>
$(function () {
$('.start-slide').click(function () {
$("#myCarousel").carousel('cycle');
}); //開始（初始化）輪播
$('.pause-slide').click(function () {
$("#myCarousel").carousel('pause');
}); //停止輪播
$('#previous-slide').click(function () {
$("#myCarousel").carousel('prev');
}); //上一頁輪播
$('.next-slide').click(function () {
$("#myCarousel").carousel('next');
}); //下一頁輪播
$('.slide-one').click(function () {
$("#myCarousel").carousel(0);
}); //點選跳到第一張
$('.slide-two').click(function () {
$("#myCarousel").carousel(1);
}); //點選跳到第二張
$('.slide-three').click(function () {
$("#myCarousel").carousel(2);
}); //點選跳到第三張
});
</script>程式碼解讀：呼叫方法，對按鈕建立自定義類或者賦予唯一ID都可，在點選按鈕時觸發點選事件click，執行click中的函式function(){
$("#輪播ID").carousel('方法')}。
執行結果
事件
例項
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slied-to="0" class="active"></li>
<li data-target="#myCarousel" data-slied-to="1"></li>
<li data-target="#myCarousel" data-slied-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/背景1.png" width="700px" height="400px" >
<div class="carousel-caption">標題1</div>
</div>
<div class="item">
<img src="img/背景2.png" width="700px" height="500px" >
<div class="carousel-caption">標題二</div>
</div>
<div class="item">
<img src="img/背景3.png" width="700px" height="500px">
<div class="carousel-caption">標題三</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#myCarousel').on('slide.bs.carousel',function () {
alert("slide例項方法出現時，將會出現此框");
});
});
</script>程式碼解讀：slide例項---發生圖片輪播時產生。觸發事件alert彈窗。
那麼slide事件與slid事件有什麼區別呢？slide是當一出現輪播時，立即觸發，而slid事件則是，出現輪播並且等待CSS過渡效果結束時，才觸發