Bootstrap學習總結筆記（23）-- 基本外掛之輪播幻燈片

阿新 • • 發佈：2019-01-19

Bootstrap 輪播（Carousel）外掛是一種靈活的響應式的向站點新增滑塊的方式。

0x01 基本例項

Bootstrap實現輪播幻燈片的效果，只需要簡單地使用class開發就可以了：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" 
 rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>輪播幻燈片</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
    <div id 
="myCarouel" class="carousel slide">
        <!--幻燈片切換指標-->
        <ol class="carousel-indicators">
            <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
            <li data-toggle="#myCarouel" data-slide-to="1"></li>
            <li 
 data-toggle="#myCarouel" data-slide-to="2"></li>
        </ol>
        <!--幻燈片專案-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../../img/slide1.png" alt="專案1">
            </div>
            <div class="item">
                <img src="../../img/slide2.png" alt="專案2">
            </div>
            <div class="item">
                <img src="../../img/slide3.png" alt="專案3">
            </div>
        </div>
        <!--幻燈片導航-->
        <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
        <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
    </div>
</div>
</body>
</html>

效果如下：

幾點說明：

（1）屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對於當前位置的位置。
（2）使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to="2" 將把滑塊移動到一個特定的索引，索引從 0 開始計數。
（3）data-ride="carousel" 屬性用於標記輪播在頁面載入時就開始動畫播放。

0x02 新增標題

可以通過.item內的.carousel-caption 元素向幻燈片新增標題：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>新增標題</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
    <div id="myCarouel" class="carousel slide">
        <!--幻燈片切換指標-->
        <ol class="carousel-indicators">
            <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
            <li data-toggle="#myCarouel" data-slide-to="1"></li>
            <li data-toggle="#myCarouel" data-slide-to="2"></li>
        </ol>
        <!--幻燈片專案-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../../img/slide1.png" alt="專案1">
                <div class="carousel-caption">標題1</div>
            </div>
            <div class="item">
                <img src="../../img/slide2.png" alt="專案2">
                <div class="carousel-caption">標題2</div>
            </div>
            <div class="item">
                <img src="../../img/slide3.png" alt="專案3">
                <div class="carousel-caption">標題3</div>
            </div>
        </div>
        <!--幻燈片導航-->
        <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
        <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
    </div>
</div>
</body>
</html>

效果如下：

0x03 JS切換

還可以利用JS來實現幻燈片的切換。下面新增一些按鈕來實現幻燈片的控制：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>JS切換</title>
</head>
<body>
<div class="container col-md-6 col-md-offset-3">
    <div id="myCarouel" class="carousel slide">
        <!--幻燈片切換指標-->
        <ol class="carousel-indicators">
            <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
            <li data-toggle="#myCarouel" data-slide-to="1"></li>
            <li data-toggle="#myCarouel" data-slide-to="2"></li>
        </ol>
        <!--幻燈片專案-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../../img/slide1.png" alt="專案1">
                <div class="carousel-caption">標題1</div>
            </div>
            <div class="item">
                <img src="../../img/slide2.png" alt="專案2">
                <div class="carousel-caption">標題2</div>
            </div>
            <div class="item">
                <img src="../../img/slide3.png" alt="專案3">
                <div class="carousel-caption">標題3</div>
            </div>
        </div>
        <!--幻燈片導航-->
        <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
        <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
        <!--控制按鈕-->
        <div style="text-align: center">
            <button type="button" class="btn start-slide">開始切換</button>
            <button type="button" class="btn pause-slide">終止切換</button>
            <button type="button" class="btn prev-slide">前一個幻燈</button>
            <button type="button" class="btn next-slide">後一個幻燈</button>
            <button type="button" class="btn slide-1">幻燈1</button>
            <button type="button" class="btn slide-2">幻燈2</button>
            <button type="button" class="btn slide-3">幻燈3</button>
        </div>
    </div>
</div>
<script>
    $(function () {
        //啟動輪播
        $(".start-slide").click(function () {
            $("#myCarouel").carousel('cycle');
        })
        //終止輪播
        $(".pause-slide").click(function () {
            $("#myCarouel").carousel('pause');
        })
        //前一個幻燈
        $(".prev-slide").click(function () {
            $("#myCarouel").carousel('prev');
        })
        //下一個幻燈
        $(".next-slide").click(function () {
            $("#myCarouel").carousel('next');
        })
        //切換到指定的幻燈
        $(".slide-1").click(function () {
            $("#mycarouel").carousel(0);
        })
        $(".slide-2").click(function () {
            $("#mycarouel").carousel(1);
        })
        $(".slide-3").click(function () {
            $("#mycarouel").carousel(2);
        })
    })
</script>
</body>
</html>

效果如下：

0x04 事件

同樣地，Carousel也定義了一些事件：

（1）slide.bs.carousel
當呼叫 slide 例項方法時立即觸發該事件：

$('#mycarouel').on('slide.bs.carousel', function () {
    // 執行一些動作...
})

（2）slid.bs.carousel
當輪播完成幻燈片過渡效果時觸發該事件：

$('#mycarouel').on('slid.bs.carousel', function () {
    // 執行一些動作...
})

看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>事件</title>
</head>
<body>
<div class="container col-md-4 col-md-offset-4">
    <div id="myCarouel" class="carousel slide">
        <!--幻燈片切換指標-->
        <ol class="carousel-indicators">
            <li data-toggle="#myCarouel" data-slide-to="0" class="active"></li>
            <li data-toggle="#myCarouel" data-slide-to="1"></li>
            <li data-toggle="#myCarouel" data-slide-to="2"></li>
        </ol>
        <!--幻燈片專案-->
        <div class="carousel-inner">
            <div class="item active">
                <img src="../../img/slide1.png" alt="專案1">
            </div>
            <div class="item">
                <img src="../../img/slide2.png" alt="專案2">
            </div>
            <div class="item">
                <img src="../../img/slide3.png" alt="專案3">
            </div>
        </div>
        <!--幻燈片導航-->
        <a class="carousel-control left" href="#myCarouel" data-slide="prev">&lt;&lt;&lt;</a>
        <a class="carousel-control right" href="#myCarouel" data-slide="next">&gt;&gt;&gt;</a>
    </div>
</div>
<script>
    $(function () {
        $("#myCarouel").on('slide.bs.carousel',function () {
            alert('切換幻燈');
        });
    })
</script>
</body>
</html>

效果如下：

Bootstrap學習總結筆記（23）-- 基本外掛之輪播幻燈片

Bootstrap 輪播（Carousel）外掛是一種靈活的響應式的向站點新增滑塊的方式。 0x01 基本例項 Bootstrap實現輪播幻燈片的效果，只需要簡單地使用class開發就可以了： <!DOCTYPE html> <html

Python學習總結筆記（10）-- MySQL資料庫操作之SQLAlchemy使用總結

SQLAlchemy是一個著名的ORM框架，使用ORM操作資料庫，不用去關注SQL語句本身，這樣可以提高開發的效率。同時使用ORM框架雖然可以減少程式碼編寫的消耗，但是可能也會執行很多冗餘的資料庫操作，降低程式的執行效率。不過總的來說，合理利用ORM框架與資料庫

Python學習總結筆記（4）--執行緒區域性變數之Threading.local

當我們使用執行緒的時候，能使用執行緒的區域性變數，就儘量不要用全域性變數，因為使用全域性變數涉及同步的問題（參見我的上一篇部落格Python學習總結筆記（3）–多執行緒與執行緒同步）。使用區域性變數的時候，需要傳遞引數，比如有這樣一個例子，程式需要處理客戶

Unity學習筆記（一）——基本概念之場景（Scene）

場景，顧名思義就是我們在遊戲中所看到的物品、建築、人物、背景、聲音、特效等，基本上和我們玩遊戲時所看到的遊戲“場景”是同一個概念。 Unity 3D中，“場景”是一個檢視，我們通過“場景”這個檢視，來編輯、佈置遊戲中玩家所能見到的影象和聲音。安裝完並執行Unity 3D，

TensorFlow深度學習入門筆記（二）基本概念與代碼1

.get ali ant scope 基本有一個關註執行 rbo 關註公眾號“從機器學習到深度學習那些事”獲取更多最新資料寫在前面學習建議：以下學習過程中有不理解可以簡單查找下資料，但不必糾結（比如非得深究某一個函數等），盡量快速的學一遍，不求甚解無妨。因為有些知

學習springboot筆記（四）資料訪問之mybatis

整合mybatis首先在pom.xml檔案中引入mybatis依賴 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>myb

python學習筆記（23）半成品的作業

lis 一位 bsp 循環結果只知道 color 這一 python學習作者：Vamei 出處：http://www.cnblogs.com/vamei 歡迎轉載，也請保留這段聲明。謝謝！原鏈：http://www.cnblogs.com/vamei/archive

Linux學習筆記（23）

23一、shell 基礎shell是個命令解釋器，提供用戶和機器之間的交互每個用戶都可以擁有自己特定的shellcentos7默認Shell為bash（Bourne Agin shell）除了bash，還有zsh.ksh等二、命令歷史敲過的命令在/root/.bash_history裏儲存著，最多可以儲存10

ECMAScript 學習筆記（2）--基本類型及語法相關

ECMAScript 學習筆記1、變量名區分大小寫; 註意代碼塊的概念。變量分為原始值和引用值：原始值存儲在棧，引用值存儲在堆（引用值一般是一個指針或對象名、函數名）。在C語言中編譯的程序占用的內存分為以下幾個部分:棧區（由系統分配/內存塊連續）、堆區(由程序員分配與釋放或系統結束後釋放/鏈表結構不連續的內存

TCP/IP學習筆記（1）-----基本概念

使用本機ip 分類公司 idt intern xtend pen 不用 TCP/IP的起源　　在全球各地，各種各樣的電腦運行著各自不同的操作系統一起為大家服務，這些電腦在表達同一種信息的時候所使用的方法是千差萬別。就好像聖經中上帝打亂了各地人的口音，讓他們無法合作

tcp/ip學習筆記（1）-基本概念

為什麼會有tcp/ip 在世界上各地，各種各樣的電腦執行著各自不同的作業系統為大家服務，這些電腦在表達同一種資訊的時候所使用的方法是千差萬別。就好像聖經中上帝打亂了各地人的口音，讓他們無法合作一樣。計算機使用者意識到，計算機只是單兵作戰並不會發揮太大的作用。只有把它們聯合起來，電腦才會發

Go語言學習筆記（二）基本語法、變數、常量、型別

基本語法 Go語言中的標記 Go程式是由各種標記組成的，標記可以是關鍵字，識別符號，常量，字串文字或符號。例如，以下Go語句由六個標記組成： fmt.Println("Hello, World!") 每個標記單獨表示為： fmt . Println ( "Hello, World

概率學習總結筆記（撲克概率）

概率公式： C（m,n）=n!/m!(n-m)! m<=n 列子： C（3,5）=5*4*3*2*1 / 3*2*1 *2*1=5*4/2=10 按公式算也可以直接就是&n

【原創】pygame學習筆記（1）----基本的線，矩形，圓形，弧形繪製

PYgame的內容（1）這個module很有意思（2）書本至少來源於《Python遊戲程式設計入門》（3）官方權威說明：https://www.pygame.org/docs/ 下面的嘗試把各種圖形在一個程式裡繪製注意點：（1）特別注意，比如引

RabbitMQ學習筆記（一）-----------------基本概念知識

3ds max學習筆記（六）-- 基本操作（建模前奏）

1.介面設定在3ds Max的版本的介面中，預設是較深。若需要切換至較亮的介面，步驟: 執行“自定義”選單，選擇“載入自定義使用者介面方案”從彈出的介面中選擇樣式檔案，單擊“開啟”即可；注：“amg-light.ui” 介面的顯示方式，是淺灰色為主的顯示介面； 2.單位設定在製作效果圖的時候，

TIJ學習筆記（二）——基本型別

這是Thinging in Java學習筆記的第二篇，主要是關於基本型別的。不足之處，歡迎斧正。不少人（包括我自己）學到了變數之後會很奇怪Java不是面嚮物件語言嗎，為什麼有int這種極具C語言（面向過程語言）氣息的變數？

springmvc學習筆記（23）——pathVariable

大家平時一定有注意到qq空間等網址是這樣子的：http://user.qzone.qq.com/380472723/ 。我剛學了Java-web之後，看到這樣子的路徑就很驚訝，我擦咧，這麼漂亮的路徑怎麼寫的。按照我們學的知識，如果要獲取QQ號為380472723的使用者的資訊，應該這樣子寫：http

OpenCV 2.4.9 學習筆記（1）—— 基本功能結構

一些關於OpenCV（2.4.9版本）的學習筆記，作為記錄，以免自己忘了。安裝與配置　　OpenCV的下載、安裝以及在各個平臺（Windows/Linux等）配置網上有很多的資料，自己就不用存了。需要或者遇到問題的時候再說。基本模組結構　　OpenCV（Open Source Computer

JVM學習筆記（一）------基本結構

從Java平臺的邏輯結構上來看，我們可以從下圖來了解JVM：從上圖能清晰看到Java平臺包含的各個邏輯模組，也能瞭解到JDK與JRE的區別對於JVM自身的物理結構，我們可以從下圖鳥瞰一下：對於JVM的學習，在我看來這麼幾個部分最重要： Java程式碼編譯和執行的整個

Bootstrap學習總結筆記（23）-- 基本外掛之輪播幻燈片

0x01 基本例項

0x02 新增標題

0x03 JS切換

0x04 事件

相關推薦