純CSS實現輪播圖

天天寫前端的你，會自己寫一個輪播圖嗎，而且不能用js哦，知道輪播圖的原理嗎？

今天我們要講的是如何只用css實現輪播圖效果，也叫banner，就是我們經常在APP或網站首頁頂部看到的一系列圖片切換。就像淘寶官網首頁那樣：

實現原理

一圖勝千言，先上圖：

解釋一下，輪播圖並排排列，組成一張很寬的圖片，而手機屏幕寬度是固定的，這樣每過一段時間，我們把寬的圖想做平移一些距離，一般是平移一個屏幕寬度，比如屏幕寬320px，就平移320px，這樣就達到了切換圖片的目的。

注意點，由於每次都平移一個手機寬度，即每張輪播圖要適應手機的尺寸，所以UI在做圖的時候要考慮這點，不然顯示的圖片很丑。

1. 把圖片水平排列

html代碼如下：

<div class="banner">
  <div class="banner-wrapper">
  <ul class="banner-list">
   <li class="item" id="item1">1</li>
   <li class="item" id="item2">2</li>
   <li class="item" id="item3">3</li>
   <li class="item" id="item4">4</li>
  </ul>
 </div>
</div>

CSS代碼如下：

.banner {
	border: 4px solid black;
	width: 300px;
	height: 150px;
	box-sizing: content-box;
}

.banner .banner-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1;
}

.banner-list {
	width: 1200px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.banner-list .item {
	width: 300px;
	height: 100%;
	display: inline-block;
	float: left;
	font-weight: bold;
	font-size: 40px;
	line-height: 150px;
}

.banner-list .item#item1{
	background: #fee2b3;
}

.banner-list .item#item2 {
	background: #ffa299;
}

.banner-list .item#item3 {
	background: #ad6989;
}

.banner-list .item#item4 {
	background: #562349;
}

圖中黑色框代表屏幕中顯示的區域，超出部分不可見。html代碼沒啥好說的，一個容器，里面套需要輪播的圖片，我們看css代碼，所謂輪播，就是不停的切換顯示區域，代碼操作就是左右移動輪播列表，這里我們用left和right屬性操作，所以就要把輪播列表的position設置成absolute，它的父節點的position設置成relative，即輪播列表相對於父節點是絕對位置，比如left: 10px，就代表列表左邊距父節點一定是10px，不管你父節點如何變化，都是這么多。水平排列，不要忘記一個重要屬性float，把float: left設置到每一個輪播項中，代表排列的時候做對齊。

2. 隱藏輪播圖外部區域

如上圖所示，最終輪播區域是在黑色框中，而外部區域是不希望看到的，現在需要把它隱藏掉：

.banner .banner-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

使用overflow: hidden把溢出容器的部分隱藏。

3. 動起來

前面的准備操作基本都差不多了（沒看懂的小伙伴多看幾遍，最好是動手敲一邊），現在是時候讓我們的輪播圖滾動起來了。前面也說了，所謂滾動，就是不停的平移輪播列表，這時候需要使用CSS幀動畫（keyframes） 代碼如下：

@keyframes banner-swipe {
	0% { left: 0; }
	33.33% { left: -300px; }
	66.66% { left: -600px; }
	100% { left: -900px; }
}

.banner-list {
	width: 1500px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	animation: banner-swipe 10s ease-in infinite;
}

定義了一個幀動畫，因為有4張圖，所以只要滾動三次就能全部播放完圖片，把整個滾動時間看作100%，那么一幀大約33.33%，而在banner-list上，我們給它綁定上幀動畫banner-swipe，規定完成一次動畫要10s，滾完之后不要停，一直無限循環（infinite），效果如下：

發現有缺陷，第四張圖和第一張圖之間切換時，會很快，原因是到第四張圖停止滾動時，整個動畫已經執行完了，就會立馬回到第一張圖，從0開始，我們把隱藏部分打開看一下：

動圖中很明顯了，4過后立馬跳到了1，解決辦法是在4后面加一個1，幀動畫里面再插入一幀，代碼如下：

<div class="banner-list">
  <div class="item" id="item1">1</div>
  <div class="item" id="item2">2</div>
  <div class="item" id="item3">3</div>
  <div class="item" id="item4">4</div>
  <div class="item" id="item1">1</div>
</div>

@keyframes banner-swipe {
	0% { left: 0; }
	25% { left: -300px; }
	50% { left: -600px; }
	75% { left: -900px; }
	100% { left: -1200px; }
}

通過上面的修改，保證了滾動的連續性。

現在還有一個問題，每張圖片幾乎沒有停過，一直在滾動，這樣肯定達不到推廣的作用而且也會使人眼花繚亂，需要再優化，修改后的幀動畫如下：

@keyframes banner-swipe {
	0% { left: 0; }
	23% {left: 0;}
	25% { left: -300px; }
	48% {left: -300px;}
	50% { left: -600px; }
	73% { left: -600px; }
	75% { left: -900px; }
	98% { left: -900px; }
	100% { left: -1200px; }
}

效果：