溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Bootstrap中圖片輪播的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。其主要顯示的效果就是多幅圖片輪流播放。鼠標(biāo)懸停在圖片時(shí)會(huì)暫停播放，如果鼠標(biāo)懸?；騿螕粲蚁陆菆A點(diǎn)時(shí)，會(huì)顯示對應(yīng)的圖片。這種圖片輪播效果，在Bootstrap框架中是通過Carousel插件來實(shí)現(xiàn)的。
一個(gè)輪播圖片主要包括三個(gè)部分：
輪播的圖片
輪播圖片的計(jì)數(shù)器
輪播圖片的控制器
復(fù)雜一點(diǎn)的輪播圖片，每個(gè)輪播區(qū)會(huì)帶有對應(yīng)的標(biāo)題和描述內(nèi)容。那么在 Bootstrap 框架中，輪播圖是如何設(shè)計(jì)的呢？
第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來聲明觸發(fā)
<div id="slidershow" class="carousel"></div>
第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 p.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有序列表來制作：
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... </ol> </div>
在 Bootstrap 框架中，輪播圖片計(jì)數(shù)器，都是以圓點(diǎn)呈現(xiàn)
.carousel-indicators {
position: absolute; /*整個(gè)計(jì)數(shù)區(qū)域絕對定位*/
bottom: 10px; /*距容器carousel底部10px*/
z-index: 15; /*設(shè)置其在Z軸的層級*/
/*讓整個(gè)計(jì)數(shù)區(qū)水平居中*/
left: 50%;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #fff;
border-radius: 10px;
}
/*設(shè)置當(dāng)前狀態(tài)樣式*/
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}第三步：設(shè)計(jì)輪播圖片播放區(qū)。輪播圖整個(gè)效果中，播放區(qū)是最關(guān)鍵的一個(gè)區(qū)域，這個(gè)區(qū)域主要用來放置需要輪播的圖片。這個(gè)區(qū)域使用 carousel-inner 樣式來控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過 item 容器來放置每張輪播的圖片
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="#" alt=""></a> </div> <div class="item"> <a href="##"><img src="#" alt=""></a> </div> … <div class="item"> <a href="##"><img src="#" alt=""></a> </div> </div> </div>
在很多輪播圖片效果中，在每個(gè)圖片上還對應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對應(yīng)的代碼：
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active">1</li> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="#" alt=""></a> <!-- 圖片對應(yīng)標(biāo)題和描述內(nèi)容 --> <div class="carousel-caption"> <h4>圖片標(biāo)題</h4> <p>描述內(nèi)容...</p> </div> </div> … </div> </div>
第四步：設(shè)計(jì)輪播圖片控制器。很多時(shí)候輪播圖片還具有一個(gè)向前播放和向后播放的控制器。在 Carousel 中通過 carousel-control 樣式配合 left 和 right 來實(shí)現(xiàn)。其中l(wèi)eft表示向前播放，right表示向后播放。其同樣放在carousel容器內(nèi)
<div id="slidershow" class="carousel"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> … </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> … </div> <!-- 設(shè)置輪播圖片控制器 --> <a class="left carousel-control" href="" > <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href=""> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
通過兩個(gè) a 鏈接在內(nèi)部定義要顯示的小圖標(biāo)，一個(gè)是向前，一個(gè)是向后。這兩個(gè)圖標(biāo)都顯示在圖片容器的上面（z-index的值大于carousel-inner的）
聲明式方法是通過定義 data 屬性來實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：
1、data-ride 屬性：取值 carousel，并且將其定義在 carousel 上
2、data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上
3、data-slide 屬性：取值包括 prev，next。prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識別符
4、data-slide-to 屬性：用來傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上
[注意]可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感
除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性
<div id="slidershow" class="carousel slide" data-ride="carousel" style="width:300px"> <!-- 設(shè)置圖片輪播的順序 --> <ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0">1</li> <li data-target="#slidershow" data-slide-to="1">2</li> <li data-target="#slidershow" data-slide-to="2">3</li> </ol> <!-- 設(shè)置輪播圖片 --> <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200 alt=""></a> <div class="carousel-caption"> <h4>圖片標(biāo)題1</h4> <p>描述內(nèi)容1...</p> </div> </div> <div class="item"> <a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a> <div class="carousel-caption"> <h4>圖片標(biāo)題2</h4> <p>描述內(nèi)容2...</p> </div> </div> <div class="item"> <a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200 alt=""></a> <div class="carousel-caption"> <h4>圖片標(biāo)題3</h4> <p>描述內(nèi)容3...</p> </div> </div> </div> <a class="left carousel-control " href="#slidershow" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slidershow" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
默認(rèn)情況下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁面加載之后就會(huì)自動(dòng)加載輪播圖片切換效果。如果沒有定義 data-ride 屬性，可以通過 JavaScript 方法來觸發(fā)輪播圖片切換。具體使用方法如下
$(".carousel").carousel();在 carousel() 方法中可以設(shè)置具體的參數(shù)，如
<div id="slidershow" class="carousel slide" style="width:300px">
<!-- 設(shè)置圖片輪播的順序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
<!-- 設(shè)置輪播圖片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題1</h4>
<p>描述內(nèi)容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題2</h4>
<p>描述內(nèi)容2...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題3</h4>
<p>描述內(nèi)容3...</p>
</div>
</div>
</div>
<a class="left carousel-control " href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script>
$("#slidershow").carousel({
interval: 1000
});
</script>
【關(guān)鍵字】
實(shí)際上，給carousel()方法配置參數(shù)之后，輪播效果就能自動(dòng)切換。但 Bootstrap 框架中的 carousel 插件還提供了幾種特殊的調(diào)用方法，簡單說明如下：
.carousel("cycle")：從左向右循環(huán)播放；
.carousel("pause")：停止循環(huán)播放；
.carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開始，類似數(shù)組；
.carousel("prev")：返回到上一幀；
.carousel("next")：下一幀【事件】
該插件只提供兩種事件類型
slide.bs.carousel 此事件在slide方法被調(diào)用之后 ，但還沒開始處理下一張圖片之前觸發(fā) slid.bs.carousel 此事件在一張圖片輪播之后觸發(fā)
<div id="slidershow" class="carousel slide" data-ride="carousel" style="width:300px">
<!-- 設(shè)置圖片輪播的順序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">2</li>
<li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
<!-- 設(shè)置輪播圖片 -->
<div class="carousel-inner">
<div class="item active">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題1</h4>
<p>描述內(nèi)容1...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題2</h4>
<p>描述內(nèi)容2...</p>
</div>
</div>
<div class="item">
<a href="##"><img src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200 alt=""></a>
<div class="carousel-caption">
<h4>圖片標(biāo)題3</h4>
<p>描述內(nèi)容3...</p>
</div>
</div>
</div>
<a class="left carousel-control " href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<button type="button" class="btn btn-default" id="btn1">播放</button>
<button type="button" class="btn btn-default" id="btn2">暫停</button>
<button type="button" class="btn btn-default" id="btn3">上一幀</button>
<button type="button" class="btn btn-default" id="btn4">下一幀</button>
<div id="result"></div>
<script>
$(function(){
$('#btn1').click(function(){
$("#slidershow").carousel('cycle');
});
$('#btn2').click(function(){
$("#slidershow").carousel('pause');
});
$('#btn3').click(function(){
$("#slidershow").carousel('prev');
});
$('#btn4').click(function(){
$("#slidershow").carousel('next');
});
$("#slidershow").on("slid.bs.carousel",function(e){
$('#result').html('當(dāng)前正在顯示第' + ($(e.relatedTarget).index()+1) + '張圖片');
})
})
</script>
看完了這篇文章，相信你對“Bootstrap中圖片輪播的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼