bootstrap轮播图随着屏幕大小改变换图片

说明：一般轮播图在手机上和在pc上不用同一张图片，同一张图片会失真，所以当屏幕小于一定的宽度时，就换一张图片展示，这里是屏幕大于一定值时使用背景图片，否则使用img标签插入一张图片。

1.html轮播图的每一项需要绑定一张大图和一张小图

 <section id="lk_carousel" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#lk_carousel" data-slide-to="0" class="active"></li>
      <li data-target="#lk_carousel" data-slide-to="1"></li>
      <li data-target="#lk_carousel" data-slide-to="2"></li>
    </ol>
  
    <!-- 滚动内容 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active" data-sm-img="../college/imgs/slide_01_640x340.jpg" data-lg-img="../college/imgs/slide_01_2000x410.jpg"></div>
      <div class="item" data-sm-img="../college/imgs/slide_02_640x340.jpg" data-lg-img="../college/imgs/slide_02_2000x410.jpg"></div>
      <div class="item" data-sm-img="../college/imgs/slide_03_640x340.jpg" data-lg-img="../college/imgs/slide_03_2000x410.jpg"></div>
    </div>
  
    <!-- 左右箭头 -->
    <a class="left carousel-control" href="#lk_carousel" 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="#lk_carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </section>

 2.在页面改变大小时进项相应处理，这里是设置的700，当然可以跟着自己的需求设置

$(function () {
    $(window).on("resize", function () {
        // 1 获取窗口的宽度
        let clientW = $(window).width()
        // 2 设置临界值
        let isShowBigImage = clientW >= 700
        // 3 获取每个轮播的item
        let $allItems = $("#lk_carousel .item")
        // 4 遍历
        $allItems.each(function (index, item) {//屏幕宽度大于700 设置背景图，否则插入一张图片
            // 4.1 通过.data()取出绑定在item上的图片的路径
            let src = isShowBigImage ? $(item).data("lg-img") : $(item).data("sm-img")
            let imgUrl = 'url("' + src + '")'
            // 4.2设置背景
            $(item).css({
                backgroundImage: imgUrl
            })
            // 4.3 设置img标签
            if (!isShowBigImage) {//empty()是每次插入图片时先清空item的图片，否则会一直添加图片
                let $img = "<img src='" + src + "'>"
                $(item).empty().append($img)
            } else {
                $(item).empty()
            }
        })

    })
    $(window).trigger("resize")//使用trigger可以一开始进来就调用resize方法
})

3.大屏时背景图片的样式

#lk_carousel .item{
    background: no-repeat center center;
    background-size: cover;
}
@media screen and (min-700px){/*屏幕小于700展示背景图，所以哟啊设置高度*/
    #lk_carousel .item{
       height: 410px;/* 和图片高度设置一样 */
    }
}

效果展示