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過渡效果結束時,才觸發