基础 - 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");
});