天天寫(xiě)前端的你，會(huì)自己寫(xiě)一個(gè)輪播圖嗎，而且不能用js哦，知道輪播圖的原理嗎？

今天我們要講的是如何只用css實(shí)現(xiàn)輪播圖效果，也叫"banner"，就是我們經(jīng)常在App或網(wǎng)站首頁(yè)頂部看到的一系列圖片切換。就像淘寶官網(wǎng)首頁(yè)那樣：

實(shí)現(xiàn)原理

一圖勝千言，先上圖：

解釋一下，輪播圖并排排列，組成一張很寬的圖片，而手機(jī)屏幕寬度是固定的，這樣每過(guò)一段時(shí)間，我們把寬的圖向左平移一些距離，一般是平移一個(gè)屏幕寬度，比如屏幕寬320px，就平移320px，這樣就達(dá)到了切換圖片的目的。

注意點(diǎn)，由于每次都平移一個(gè)手機(jī)寬度，即每張輪播圖要適應(yīng)手機(jī)的尺寸，所以UI在做圖的時(shí)候要考慮這點(diǎn)，不然顯示的圖片很丑。

#0 把圖片水平排列

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;
}

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

#1 隱藏輪播圖外部區(qū)域

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

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

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

#2 動(dòng)起來(lái)

前面的準(zhǔn)備操作基本都差不多了（沒(méi)看懂的小伙伴多看幾遍，最好是動(dòng)手敲一邊），現(xiàn)在是時(shí)候讓我們的輪播圖滾動(dòng)起來(lái)了。前面也說(shuō)了，所謂滾動(dòng)，就是不停的平移輪播列表，這時(shí)候需要使用CSS幀動(dòng)畫(huà)（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;
}

定義了一個(gè)幀動(dòng)畫(huà)，因?yàn)橛?張圖，所以只要滾動(dòng)三次就能全部播放完圖片，把整個(gè)滾動(dòng)時(shí)間看作100%，那么一幀大約33.33%，而在banner-list上，我們給它綁定上幀動(dòng)畫(huà)banner-swipe，規(guī)定完成一次動(dòng)畫(huà)要10s，滾完之后不要停，一直無(wú)限循環(huán)（infinite），效果如下：

發(fā)現(xiàn)有缺陷，第四張圖和第一張圖之間切換時(shí)，會(huì)很快，原因是到第四張圖停止?jié)L動(dòng)時(shí)，整個(gè)動(dòng)畫(huà)已經(jīng)執(zhí)行完了，就會(huì)立馬回到第一張圖，從0開(kāi)始，我們把隱藏部分打開(kāi)看一下：

動(dòng)圖中很明顯了，4過(guò)后立馬跳到了1，解決辦法是在4后面加一個(gè)1，幀動(dòng)畫(huà)里面再插入一幀，代碼如下：

// html
<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>

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

通過(guò)上面的修改，保證了滾動(dòng)的連續(xù)性。

現(xiàn)在還有一個(gè)問(wèn)題，每張圖片幾乎沒(méi)有停過(guò)，一直在滾動(dòng)，這樣肯定達(dá)不到推廣的作用而且也會(huì)使人眼花繚亂，需要再優(yōu)化，修改后的幀動(dòng)畫(huà)如下：

@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; }
}

效果：

————

最后，歡迎大家關(guān)注我哦