Bootstrap中圖片輪播的示例分析

小編給大家分享一下Bootstrap中圖片輪播的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

岳陽(yáng)縣網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開(kāi)發(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ì)顯示對(duì)應(yīng)的圖片。這種圖片輪播效果，在Bootstrap框架中是通過(guò)Carousel插件來(lái)實(shí)現(xiàn)的。

結(jié)構(gòu)

一個(gè)輪播圖片主要包括三個(gè)部分：

輪播的圖片
輪播圖片的計(jì)數(shù)器
輪播圖片的控制器

復(fù)雜一點(diǎn)的輪播圖片，每個(gè)輪播區(qū)會(huì)帶有對(duì)應(yīng)的標(biāo)題和描述內(nèi)容。那么在 Bootstrap 框架中，輪播圖是如何設(shè)計(jì)的呢？

第一步：設(shè)計(jì)輪播圖片的容器。在 Bootstrap 框架中采用 carousel 樣式，并且給這個(gè)容器定義一個(gè) ID 值，方便后面采用 data 屬性來(lái)聲明觸發(fā)

<div id="slidershow" class="carousel"></div>

第二步：設(shè)計(jì)輪播圖片計(jì)數(shù)器。在容器 p.carousel 的內(nèi)部添加輪播圖片計(jì)算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個(gè)li)，一般采用有序列表來(lái)制作：

<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ū)域絕對(duì)定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*設(shè)置其在Z軸的層級(jí)*/
    /*讓整個(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ū)域主要用來(lái)放置需要輪播的圖片。這個(gè)區(qū)域使用 carousel-inner 樣式來(lái)控制，而且其同樣放置在 carousel 容器內(nèi)，并且通過(guò) item 容器來(lái)放置每張輪播的圖片

<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è)圖片上還對(duì)應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實(shí) Bootstrap 框架中的 Carousel 也提供類似的效果。只需要在 item 中圖片底部添加對(duì)應(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>
            <!-- 圖片對(duì)應(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 中通過(guò) carousel-control 樣式配合 left 和 right 來(lái)實(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>

通過(guò)兩個(gè) a 鏈接在內(nèi)部定義要顯示的小圖標(biāo)，一個(gè)是向前，一個(gè)是向后。這兩個(gè)圖標(biāo)都顯示在圖片容器的上面（z-index的值大于carousel-inner的）

聲明式觸發(fā)

聲明式方法是通過(guò)定義 data 屬性來(lái)實(shí)現(xiàn)，data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種：

1、data-ride 屬性：取值 carousel，并且將其定義在 carousel 上

2、data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識(shí)別符，如前面示例所示，取值為“#slidershow”，并且將其定義在輪播圖計(jì)數(shù)器的每個(gè) li 上

3、data-slide 屬性：取值包括 prev，next。prev表示向后滾動(dòng)，next 表示向前滾動(dòng)。該屬性值同樣定義在輪播圖控制器的 a 鏈接上，同時(shí)設(shè)置控制器 href 值為容器 carousel 的 ID 名或其他樣式識(shí)別符

4、data-slide-to 屬性：用來(lái)傳遞某個(gè)幀的下標(biāo)，比如 data-slide-to="2"，可以直接跳轉(zhuǎn)到這個(gè)指定的幀（下標(biāo)從0開(kāi)始計(jì)），同樣定義在輪播圖計(jì)數(shù)器的每個(gè) li 上

[注意]可以為 #slidershow 層添加 slide 樣式，使用圖片與圖片切換效果有平滑感

除了data-ride="carousel"、data-slide、data-slide-to 以外，輪播組件還支持其他三個(gè)自定義屬性

Bootstrap中圖片輪播的示例分析

<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>

Bootstrap中圖片輪播的示例分析

JS觸發(fā)

默認(rèn)情況下，如果 carousel 容器上定義了 data-ride="carousel" 屬性，頁(yè)面加載之后就會(huì)自動(dòng)加載輪播圖片切換效果。如果沒(méi)有定義 data-ride 屬性，可以通過(guò) JavaScript 方法來(lái)觸發(fā)輪播圖片切換。具體使用方法如下

$(".carousel").carousel();

在 carousel() 方法中可以設(shè)置具體的參數(shù)，如

Bootstrap中圖片輪播的示例分析

<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>

Bootstrap中圖片輪播的示例分析

【關(guān)鍵字】

實(shí)際上，給carousel()方法配置參數(shù)之后，輪播效果就能自動(dòng)切換。但 Bootstrap 框架中的 carousel 插件還提供了幾種特殊的調(diào)用方法，簡(jiǎn)單說(shuō)明如下：

.carousel("cycle")：從左向右循環(huán)播放；
.carousel("pause")：停止循環(huán)播放；
.carousel("number")：循環(huán)到指定的幀，下標(biāo)從0開(kāi)始，類似數(shù)組；
.carousel("prev")：返回到上一幀；
.carousel("next")：下一幀

【事件】

該插件只提供兩種事件類型

slide.bs.carousel    此事件在slide方法被調(diào)用之后 ，但還沒(méi)開(kāi)始處理下一張圖片之前觸發(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中圖片輪播的示例分析

看完了這篇文章，相信你對(duì)“Bootstrap中圖片輪播的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：Bootstrap中圖片輪播的示例分析
路徑分享：http://muchs.cn/article26/piddjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站導(dǎo)航、App開(kāi)發(fā)、網(wǎng)站建設(shè)、微信公眾號(hào)、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容