實現原理

一圖勝千言，先上圖：

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

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

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

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

#1 隱藏輪播圖外部區域

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

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

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

#2 動起來

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

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

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

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

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

效果：