bootstrap的使用讓頁面開發的速度變得更快,在這裡就著重解析一下bootstrap3裡輪播圖模組,和不同情況（螢幕寬度）下輪播圖圖片大小如何做到響應式切換.

下面程式碼即是bootstrap3輪播圖模組解析:

<section id="banner">
    <!-- 當同一個頁面中,同時存在多個輪播圖時,不同的輪播圖以及他的控制按鈕,需要有相對應id值 -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- 控制翻頁的圓點 -->
        <ol class="carousel-indicators">
            <!-- data-target 指向被控制的輪播圖 -->
            <!-- data-slide-to 表示點選這個點時,需要跳轉到第幾頁 -->
            <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">
            <!-- 一個item表示一頁 -->
            <!-- active表示當前正在顯示的一頁 -->
            <div class="item active" >
                <!--<img src="./img/slide_01_2000x410.jpg" alt="...">-->
                <!-- carousel-caption 輪播圖中的字幕 -->
                <!-- 顯示在輪播圖中心偏下的位置 -->
                <!--<div class="carousel-caption">-->
                    <!--ABCDEFG-->
                <!--</div>-->
            </div>
            <div class="item" >
            </div>
            <div class="item" >
            </div>
            <div class="item" >
            </div>
        </div>
        <!-- Controls 左右的翻頁箭頭 -->
        <!-- 翻頁控制中,href屬性指向所控制的輪播圖 -->
        <!-- data-slide 表示翻頁的方向 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
 

輪播圖的圖片需要新增到<div class="item">中去

那麼新增圖片的方式有幾種呢?

這裡提供幾種可行的圖片新增方式:

方法1:最簡單的辦法

div中新增 <img> 標籤來實現

            <div class="item">
                <img src="./img/slide_02_2000x410.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
 

這種方法需要設定較為複雜的CSS樣式來讓圖片超過螢幕寬度時讓圖片居中顯示並overflow:hidden

方法2:設定div的背景來實現

            background: url('圖片.jpg') center center no-repeat;

並設定background-size:cover 根據短的邊填滿圖片

圖片是獲取的內容,在網頁設計中也不應該由css來獲取,應該通過邏輯來獲取圖片的地址

方法3：當你的圖片名有嚴格的名稱如 

slide_00_2000x410.jpg

slide_01_2000x410.jpg

slide_02_2000x410.jpg

slide_03_2000x410.jpg

slide_00_640x360.jpg

slide_01_640x360.jpg

slide_02_640x360.jpg

$(function () {
    var itemArr = $(' .item');
    console.log(itemArr);
//    根據不同的item，設定不同的圖片
    itemArr.each(function (index,item) {
        //通過index，來構建圖片的url
        var imgURL = './img/slide_0'+index +'_2000x410.jpg';
        //設定背景圖片的URL地址
        item.style.backgroundImage = "url('" + imgURL +"')";
    })
});

方法4:使用來data-image 來巧妙的獲取來圖片的路徑,從而避開了對圖片地址的依賴

首先需要設定div:

            <div class="item" data-image="./img/slide_02_2000x410.jpg">
                <!--<img src="./img/slide_02_2000x410.jpg" alt="...">-->
                <div class="carousel-caption">
                </div>
            </div>

$(function () {
    //輪播圖片的設定
    var itemArr = $('.item');
    itemArr.each(function (index, item) {
        //獲取data-image裡面的資料
        var imageURL = item.dataset.image;
        item.style.backgroundImage = "url('" + imageURL +"')";
    });
});

這樣就可以方便的通過修改data-image的值來更換頁面,整體的程式碼也更加幹練.

--------------------------------------------------------------------------------------------------------------------

響應式頁面的輪播圖的圖片也應該是響應式的,大螢幕輪播圖用大圖,小平面輪播圖用小圖,下面的程式碼可以通過方法4實現輪播圖的響應式

div設定:

            <div class="item" data-large-image="./img/slide_03_2000x410.jpg" data-small-image="./img/slide_03_640x340.jpg">
                <!--<img src="./img/slide_03_2000x410.jpg" alt="...">-->
                <div class="carousel-caption">
                </div>
            </div>

//當螢幕大小發生變化是時,根據寬度來改變圖片的大小
//視窗寬度大小便是時觸發的事件
$(window).on('resize',function () {
    //獲取當前螢幕額的寬度
    var screenWidth = $(window).width();
    console.log(screenWidth);
    var itemArr = $('#banner > .carousel > .carousel-inner> .item');
    itemArr.each(function (index, item) {
        //獲取data-image裡面的資料
        var largeImageURL = item.dataset.largeImage;
        var smallImageURL = item.dataset.smallImage;
        //當螢幕大小小於768時用640*360大小的圖片
        if(screenWidth<768){
            item.style.backgroundImage = "url('" + smallImageURL +"')";
            //根據螢幕寬度調整圖片高度
            var imageHeight = screenWidth /640 *360;
            item.style.height =imageHeight +"px";
        }else {
            item.style.backgroundImage = "url('" + largeImageURL +"')";
            item.style.height='410px';
        }

    });

}).trigger('resize'); //讓視窗開啟的時候就執行一次

謝謝觀看~麼麼噠