亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告：魔扣目錄網(wǎng)為廣大站長提供免費收錄網(wǎng)站服務(wù)，提交前請做好本站友鏈：【 網(wǎng)站目錄：http://www.430618.com 】， 免友鏈快審服務(wù)（50元/站），

點擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

詳解Bootstrap中的圖片輪播--Carousel插件

發(fā)布時間：2021-04-23 13:11:51 作者：網(wǎng)友整理

本篇文章帶大家詳細(xì)了解一下Bootstrap中的圖片輪播。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。


詳解Bootstrap中的圖片輪播--Carousel插件


圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。其主要顯示的效果就是多幅圖片輪流播放。鼠標(biāo)懸停在圖片時會暫停播放，如果鼠標(biāo)懸停或單擊右下角圓點時，會顯示對應(yīng)的圖片。這種圖片輪播效果，在Bootstrap框架中是通過Carousel插件來實現(xiàn)的。

結(jié)構(gòu)

一個輪播圖片主要包括三個部分：

輪播的圖片

輪播圖片的計數(shù)器

輪播圖片的控制器

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

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

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

第二步：設(shè)計輪播圖片計數(shù)器。在容器 p.carousel 的內(nèi)部添加輪播圖片計算器，采用 carousel-indicators 樣式，其主要功能是顯示當(dāng)前圖片的播放順序(有幾張圖片就放置幾個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 框架中，輪播圖片計數(shù)器，都是以圓點呈現(xiàn)

.carousel-indicators {
    position: absolute; /*整個計數(shù)區(qū)域絕對定位*/
    bottom: 10px; /*距容器carousel底部10px*/
    z-index: 15; /*設(shè)置其在Z軸的層級*/
    /*讓整個計數(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è)計輪播圖片播放區(qū)。輪播圖整個效果中，播放區(qū)是最關(guān)鍵的一個區(qū)域，這個區(qū)域主要用來放置需要輪播的圖片。這個區(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>

在很多輪播圖片效果中，在每個圖片上還對應(yīng)有自己的標(biāo)題和描述內(nèi)容。其實 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">
                <h3>圖片標(biāo)題</h3>
                <p>描述內(nèi)容...</p>
            </div>
        </div>
    …
    </div>
</div>

第四步：設(shè)計輪播圖片控制器。很多時候輪播圖片還具有一個向前播放和向后播放的控制器。在 Carousel 中通過 carousel-control 樣式配合 left 和 right 來實現(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>

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

聲明式觸發(fā)

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

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

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

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

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

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

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


詳解Bootstrap中的圖片輪播--Carousel插件


<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.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題1</h3>
                <p>描述內(nèi)容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題2</h3>
                <p>描述內(nèi)容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題3</h3>
                <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中的圖片輪播--Carousel插件


JS觸發(fā)

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

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

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


詳解Bootstrap中的圖片輪播--Carousel插件


<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.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題1</h3>
                <p>描述內(nèi)容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題2</h3>
                <p>描述內(nèi)容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題3</h3>
                <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中的圖片輪播--Carousel插件


【關(guān)鍵字】

實際上，給carousel()方法配置參數(shù)之后，輪播效果就能自動切換。但 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.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img1.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題1</h3>
                <p>描述內(nèi)容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img2.jpg" width=300 height=200 alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題2</h3>
                <p>描述內(nèi)容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="##"><img src="http://sandbox.runjs.cnhttps://www.zztuku.com/uploads/rs/26/ddzmgynp/img3.jpg" width=300 height=200  alt=""></a>
            <div class="carousel-caption">
                <h3>圖片標(biāo)題3</h3>
                <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中的圖片輪播--Carousel插件


分享到：
標(biāo)簽：Bootstrap 圖片輪播 Carousel插件
用戶無頭像

網(wǎng)友整理

注冊時間：

網(wǎng)站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨大挑戰(zhàn)2018-06-03

數(shù)獨一種數(shù)學(xué)游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學(xué)四六

運動步數(shù)有氧達(dá)人2018-06-03

記錄運動步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定