关于如何将轮播图在移动端和pc端自适应的操作

我用的bootstrap框架做的,轮播图代码用的bootstrap上的。
如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图，通过屏幕宽度的改变,来确定展示大图片还是小图片。

html代码

这里我将2张图片放在了自定义属性data-image中,方便操作。

<section id="main_ad" class="carousel slide" data-ride="carousel" data-interval="2200">
        <!-- Indicators 活动指示器-->
        <ol class="carousel-indicators">
            <li data-target="#main_ad" data-slide-to="0" class="active"></li>
            <li data-target="#main_ad" data-slide-to="1"></li>
            <li data-target="#main_ad" data-slide-to="2"></li>
        </ol>

        <!-- 轮播内容容器 -->
        <div class="carousel-inner" role="listbox">
            <div class="item active"  data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg">
            </div>
            <div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg">
            </div>
            <div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg">
            </div>
        </div>

        <!-- Controls控制切换 -->
        <a class="left carousel-control" href="#main_ad" 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="#main_ad" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </section>

css代码

图片覆盖方式为cover,将整个图片铺满,定位让图片不管在pc还是移动端都能居中展示。

#main_ad > .carousel-inner > .item{
    height: 410px;
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}
/*什么时候不能用410px高度*/
/*通过媒体查询的方式控制*/
/*当屏幕宽度大于768px的时候*/
@media (min-width: 768px) {
    #main_ad > .carousel-inner > .item{
        height: 410px;
    }
}
#main_ad > .carousel-inner > .item >img{
    width: 100%;
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}

js代码

我用的jquery来写，定义了resize()方法，当屏幕宽度小于768的时候我让小图片将大图片替换掉，加trigger的原因是因为我遇到了图片开始的时候不出来，要改变宽度的时候才触发,所以加了trigger当图片一开始就触发，而不是resize的时候触发。

//让图片跟随屏幕自适应
$(function(){
    function resize(){
        var windowWidth = $(window).width();//获取屏幕的值
        //console.log(windowWidth);
        //判断屏幕大还是小
        var isSmallScreeen = windowWidth < 768;
        //根据大小为界面的每一张轮播图设置背景
        $('#main_ad > .carousel-inner > .item').each(function (i,item) {
            var $item = $(item);//因为each方法返回的是dom对象，不是jquery对象
            var imgSrc = $item.data(isSmallScreeen ? 'image-xs':'image-lg');
            $item.css('backgroundImage','url(" '+ imgSrc + '")');
             //因为我们需要小图尺寸等比例缩放,所以小图时我们使用img标签，更加体验友好，而不是在div里面直接backgroun:url()的方式,用url不会等比例缩放
            if(isSmallScreeen){
                $item.html('<img src="'+ imgSrc + '" alt="" />')
            }else{
                $item.empty();
            }
        })
    }
    $(window).on('resize',resize).trigger('resize');//trigger让函数自己触发一次
});