我用的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讓函數自己觸發一次 });

總結

以上是生活随笔為你收集整理的关于如何将轮播图在移动端和pc端自适应的操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。