基礎 - Bootstrap輪播圖

大圖在小屏幕下居中顯示的2個方案

方案1

背景圖的center center

方案2

子絕父相　　left：50% 　　margin-left:-width的一半

下面看看方案1

<!--#zw-carousel-->
<section id="zw-carousel" class="carousel slide" data-ride="carousel">
    <!--活動指示器-->
    <ol class="carousel-indicators">
        <li data-target="#zw-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#zw-carousel" data-slide-to="1"></li>
        <li data-target="#zw-carousel" data-slide-to="2"></li>
    </ol>
    <!--輪播內容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active" style="background-image: url('http://caifu.weijinsuo.com/showNewsImage.do?pic=14752860565672788.jpg')">
        </div>
        <div class="item" style="background-image: url('http://caifu.weijinsuo.com/showNewsImage.do?pic=14749742777184602.jpg')">
        </div>
        <div class="item" style="background-image: url('http://caifu.weijinsuo.com/showNewsImage.do?pic=14760008303724222.jpg')">
        </div>
    </div>
    <!--控制按鈕-->
    <a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">
    </a>
    <a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">
    </a>
</section>

　　

#zw-carousel {

}
#zw-carousel .carousel-inner .item {
    height: 340px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

　　

關於bacground-size的說明

contain　　等比縮放，顯示全部圖片

cover　　　等比縮放，鋪滿整個界面

 

移動端的流量問題

大圖在移動端是不適合的 太浪費流量

解決方案　　圖片響應式　　動態加載圖片，移動端使用小圖，PC端使用大圖

 

<!--#zw-carousel-->
<section id="zw-carousel" class="carousel slide" data-ride="carousel">
    <!--活動指示器-->
    <ol class="carousel-indicators">
        <li data-target="#zw-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#zw-carousel" data-slide-to="1"></li>
        <li data-target="#zw-carousel" data-slide-to="2"></li>
    </ol>
    <!--輪播內容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1475019690583829530.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201609/1475106363933337448.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1475019826680835376.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201609/1475106407810591212.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1474933413103322244.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201608/1472605962276572392.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201608/1472516646079596005.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201608/1470870891883819299.jpg" >
        </div>
    </div>
    <!--控制按鈕-->
    <a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">
    </a>
    <a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">
    </a>
</section>

　　

#zw-carousel {

}
#zw-carousel .carousel-inner .item {
    height: 340px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}

　　

/*jQuery的入口函數*/
$(function () {
    function funZwCarouselResizeImage () {
        /*屏幕寬度，可以$(window).width()，或者window.innerWidth*/
        var nWindowWidth = $(window).width();
        /*判斷屏幕是大是小*/
        var isBigScreen = nWindowWidth >= 768;
        /*分大小屏幕,遍歷dom數組為輪播圖設置背景*/
        $("#zw-carousel > .carousel-inner > .item").each(function (index,element) {
            /*把dom對象轉為jQuery對象*/
            var $element = $(element);
            /*data下的image的src*/
            var imageSrc = $element.data(isBigScreen?"image-big":"image-small");
            /*設置背景*/
            $element.css("backgroundImage","url('"+imageSrc+"')");
        });
    }
    /*綁定resize事件同時觸發一次*/
    $(window).on("resize",funZwCarouselResizeImage).trigger("resize");
});

　　

然而，這種效果也不是我們想要的

我們希望小圖時，圖片等比例變化

我們希望大圖使用背景，小圖使用img標簽

 

最終版本

<!--#zw-carousel-->
<section id="zw-carousel" class="carousel slide" data-ride="carousel">
    <!--活動指示器-->
    <ol class="carousel-indicators">
        <li data-target="#zw-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#zw-carousel" data-slide-to="1"></li>
        <li data-target="#zw-carousel" data-slide-to="2"></li>
    </ol>
    <!--輪播內容-->
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1475019690583829530.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201609/1475106363933337448.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1475019826680835376.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201609/1475106407810591212.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201609/1474933413103322244.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201608/1472605962276572392.jpg" >
        </div>
        <div class="item" data-image-big="http://ossweb-img.qq.com/upload/adw/image/201608/1472516646079596005.jpg" data-image-small="http://ossweb-img.qq.com/upload/adw/image/201608/1470870891883819299.jpg" >
        </div>
    </div>
    <!--控制按鈕-->
    <a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</section>

　　

#zw-carousel {

}
#zw-carousel .carousel-inner .item {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
@media (min-width: 768px) {
    #zw-carousel .carousel-inner .item {
        height: 410px;
    }
}
#zw-carousel .carousel-inner .item img {
    width:100%;
}

　　

/*jQuery的入口函數*/
$(function () {
    function funZwCarouselResizeImage () {
        /*屏幕寬度，可以$(window).width()，或者window.innerWidth*/
        var nWindowWidth = $(window).width();
        /*判斷屏幕是大是小*/
        var isBigScreen = nWindowWidth >= 768;
        /*分大小屏幕,遍歷dom數組為輪播圖設置背景*/
        $("#zw-carousel > .carousel-inner > .item").each(function (index,element) {
            /*把dom對象轉為jQuery對象*/
            var $element = $(element);
            /*data下的image的src*/
            var sImageSrc = $element.data(isBigScreen?"image-big":"image-small");
            /**/
            if (isBigScreen) {
                $element.css("backgroundImage","url('"+sImageSrc+"')");
                $element.empty();
            } else {
                $element.css("backgroundImage","url('')");
                $element.html('<img src="'+sImageSrc+'" alt="" />');
            }
        });
    }
    /*綁定resize事件同時觸發一次*/
    $(window).on("resize",funZwCarouselResizeImage).trigger("resize");
});