使用HTML+CSS實現響應式輪播圖
一、輪播圖展示
- 移動端(< 768px)
![在這裏插入圖片描述]()
- 非移動端(>768px)
![在這裏插入圖片描述]()
二、輪播圖實現思路
- 移動端
1)、在移動端可以直接使用bootstrap提供的相關代碼實現輪播圖效果，注意輪播圖中的圖片應該放在一個a標籤中，以便於點擊圖片跳轉。
2)、a標籤的寬度應該爲100% ，display應該爲block
3)、a標籤下面的img標籤寬度也應該爲100%,display爲block - 非移動端
1)、在非移動端應該將圖片作爲a標籤的背景來生成輪播圖
2)、a標籤的寬度爲100%，高度與圖片相同，background-position: center center;background-size: cover;
3)、background-image屬性可以通過內聯樣式的方式來設置，因爲每個a標籤中的圖片都不一樣。 - 在不同屏幕下會顯示不同的輪播圖，可以使用hidden-*來實現
三、相關代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!--
通過標籤的方式寫出的響應式輪播圖在加載頁面時，會向服務器請求所有的圖片，移動端和PC端的
圖片都會請求，故不推薦這麼使用，應該用JS進行優化
-->
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style type='text/css'>
.mobileImg{
width: 100%;
display: block;
}
.mobileImg > img {
width: 100%;
display: block;
}
</style>
<!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<style type='text/css'>
.PcImg{
width: 100%;
height: 410px;
display: block;
background-position: center center;
background-size: cover;
}
</style>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- 移動端 -->
<a href="javascript:;" class="mobileImg hidden-lg hidden-md hidden-sm">
<img src="images/slide_01_640x340.jpg" alt="...">
</a>
<!-- 非移動端 -->
<a href="javascript:;" class="PcImg hidden-xs" style="background-image: url('./images/slide_01_2000x410.jpg');"></a>
</div>
<div class="item">
<a href="javascript:;" class="mobileImg hidden-lg hidden-md hidden-sm">
<img src="images/slide_02_640x340.jpg" alt="...">
</a>
<a href="javascript:;" class="PcImg hidden-xs" style="background-image: url('./images/slide_02_2000x410.jpg');"></a>
</div>
<div class="item">
<a href="javascript:;" class="mobileImg hidden-lg hidden-md hidden-sm">
<img src="images/slide_03_640x340.jpg" alt="...">
</a>
<a href="javascript:;" class="PcImg hidden-xs" style="background-image: url('./images/slide_03_2000x410.jpg');"></a>
</div>
<div class="item">
<a href="javascript:;" class="mobileImg hidden-lg hidden-md hidden-sm">
<img src="images/slide_04_640x340.jpg" alt="...">
</a>
<a href="javascript:;" class="PcImg hidden-xs" style="background-image: url('./images/slide_04_2000x410.jpg');"></a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
四、相關知識總結
雖然使用這種方法也可以完成輪播圖的功能，但這種方式有一個缺點，當我們刷新頁面時，所有的圖片都會同時加載，若我們在移動端，那麼刷新頁面後，移動端的輪播圖圖片會加載，PC端的輪播圖圖片也會加載，即無論哪種屏幕都會加載所有的圖片，會使資源浪費比較嚴重，所以不推薦這種使用方式，應該通過JS或Jquery來動態的加載圖片。
