BootStrap：輪播插件

本文轉載自查看原文 2019-02-22 11:28 484 前端開發/ Bootstrap

前述

利用 BootStrap 實現圖片輪播，包括基本輪播、帶標題的輪播、設置輪播速度的輪播、控制前后的輪播

實例

基本輪播

代碼

1.引入bootstrap和jQuery文件

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.首先要有一個整體的輪播容器

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

3.設置輪播指標

data-ride 屬性：取值 carousel，並且將其定義在 carousel 上。
data-target 屬性：取值 carousel 定義的 ID 名或者其他樣式識別符，如下面的實例，取值為“#carousel-example-generic”，並且將其定義在輪播圖計數器的每個 li 上。
data-slide-to 屬性：用來傳遞某個幀的下標，比如 data-slide-to="2"，可以直接跳轉到這個指定的幀（下標從0開始計），同樣定義在輪播圖計數器的每個 li 上。
Carousel-indicators：圓圈部分樣式，都是絕對定位，每個li設置為行內塊元素，用text-indent：-999來隱藏字體

<!-- 輪播指標 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 輪播指標 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

4.設置輪播的幻燈片項目

Carousel-inner：旋轉圖片列表區域，其中每項有item來修飾
其中的active、next、prev都認為是可見的
class="item active"：利用active來設置對應顯示的

    <!-- 輪播的幻燈片項目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
        </div>
    </div>

完整代碼

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 輪播指標 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
 
    <!-- 輪播的幻燈片項目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
        </div>
    </div>
</div>

效果展示

可以看到我是通過鼠標點擊來實現圖片的切換

帶標題的輪播

代碼

和基本輪播的整體結構相同，不同點是要在輪播的幻燈片項目中添加 Carousel-caption 樣式對應的代碼塊

Carousel-caption：表示每個item項應該有標題信息，默認顯示下、中位置

<!-- 輪播的幻燈片項目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>標題一</h4>
                <p>圖片一內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>標題二</h4>
                <p>圖片二內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>標題三</h4>
                <p>圖片三內容簡介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>標題四</h4>
                <p>圖片四內容簡介</p>
            </div>
        </div>
    </div>

效果展示

設置輪播速度的輪播

代碼

1.添加輪播時間的屬性
設置輪播速度也非常簡單，不需要進行大改動，只需要在整體的輪播容器上設置 data-interval="1000" 屬性
表示每一秒輪播一張圖片

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

2.完整代碼

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
    <!-- 輪播指標 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
 
    <!-- 輪播的幻燈片項目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>標題一</h4>
                <p>圖片一內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>標題二</h4>
                <p>圖片二內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>標題三</h4>
                <p>圖片三內容簡介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>標題四</h4>
                <p>圖片四內容簡介</p>
            </div>
        </div>
    </div>
</div>

效果展示

控制前后的輪播

代碼

1.我們要在基本輪播的基礎上添加控制前后切換的代碼來實現功能
最核心的代碼是：data-slide="prev" 屬性 data-slide接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

2.完整代碼

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 輪播指標 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
 
    <!-- 輪播的幻燈片項目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
            <div class="carousel-caption">
                <h4>標題一</h4>
                <p>圖片一內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
            <div class="carousel-caption">
                <h4>標題二</h4>
                <p>圖片二內容簡介</p>
            </div>
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
            <div class="carousel-caption">
                <h4>標題三</h4>
                <p>圖片三內容簡介</p>
            </div>
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg" >
            <div class="carousel-caption">
                <h4>標題四</h4>
                <p>圖片四內容簡介</p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

效果展示

總結

結合上面的實例，可以總結出：

Html結構：主要分為以四個部分
- 容器：最外層div，需要一個data-ride=”carousel”來指定為輪播放插件，並且提供一個Id，方便圓圈指示符的關聯
- 圖片列表部分，用一個外層div包裹所有，然后每個img會被一個div，則class為item的包裹住
- 圓圈指示符：用一個ol列表來顯示其各圖形列表項，每個列表項需要指定data-slide-to=”index”屬性，用於標記當前圓圈的索引號，ol li 來和最外層的容器進行關聯
- 左右控制按鈕：實現向左、向右移動的功能
css樣式
- Carousel：只有一個相對定位標記
- Carousel-inner：旋轉圖片列表區域，其中每項有item來修飾，其中的active、next、prev都認為是可見的，Carousel-caption：表示每個item項應該有標題信息，默認顯示下、中位置
- Carousel-control：設置向左、向右按鈕的樣式，其中會設置漸變、透明度等信息，提供了icon-prev、icon-next兩種額外樣式
- Carousel-indicators：圓圈部分樣式，都是絕對定位，每個li設置為行內塊元素，用text-indent：-999來隱藏字體

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap 輪播插件 bootstrap輪播圖carousel插件 Bootstrap插件-carousel(輪播圖) Bootstrap自帶的那些常用插件-輪播圖 bootstrap 學習筆記輪播（Carousel）插件 Bootstrap-Plugin：輪播（Carousel）插件 Bootstrap -- 插件: 按鈕狀態、折疊樣式、輪播樣式第124天：移動web端-Bootstrap輪播圖插件使用 bootstrap輪播圖組件基於BootStrap的輪播圖