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

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

實現(xiàn)原理

一圖勝千言翁涤，先上圖：

解釋一下桥言，輪播圖并排排列萌踱，組成一張很寬的圖片，而手機屏幕寬度是固定的号阿，這樣每過一段時間并鸵，我們把寬的圖向左平移一些距離，一般是平移一個屏幕寬度扔涧，比如屏幕寬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;
}

圖中黑色框代表屏幕中顯示的區(qū)域劝枣，超出部分不可見汤踏。html代碼沒啥好說的，一個容器舔腾，里面套需要輪播的圖片溪胶，我們看css代碼，所謂輪播稳诚，就是不停的切換顯示區(qū)域哗脖，代碼操作就是左右移動輪播列表，這里我們用left和right屬性操作扳还，所以就要把輪播列表的position設置成absolute才避，它的父節(jié)點的position設置成relative，即輪播列表相對于父節(jié)點是絕對位置氨距，比如left: 10px桑逝，就代表列表左邊距父節(jié)點一定是10px，不管你父節(jié)點如何變化俏让，都是這么多楞遏。水平排列，不要忘記一個重要屬性float首昔，把float: left設置到每一個輪播項中寡喝，代表排列的時候做對齊。

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

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

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

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

#2 動起來

前面的準備操作基本都差不多了（沒看懂的小伙伴多看幾遍珊皿，最好是動手敲一邊），現(xiàn)在是時候讓我們的輪播圖滾動起來了巨税。前面也說了蟋定，所謂滾動，就是不停的平移輪播列表草添，這時候需要使用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肆资，規(guī)定完成一次動畫要10s，滾完之后不要停灶芝，一直無限循環(huán)（infinite）郑原，效果如下：

發(fā)現(xiàn)有缺陷，第四張圖和第一張圖之間切換時夜涕，會很快犯犁，原因是到第四張圖停止?jié)L動時，整個動畫已經(jīng)執(zhí)行完了女器，就會立馬回到第一張圖酸役，從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; }
}

效果如下：

通過上面的修改暑塑，保證了滾動的連續(xù)性。

現(xiàn)在還有一個問題锅必，每張圖片幾乎沒有停過事格，一直在滾動，這樣肯定達不到推廣的作用而且也會使人眼花繚亂搞隐，需要再優(yōu)化驹愚，修改后的幀動畫如下：

@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)注我哦劣纲。

添加公眾號逢捺，一起學習，共同進步

純CSS實現(xiàn)輪播圖

純CSS實現(xiàn)輪播圖

實現(xiàn)原理

#0 把圖片水平排列

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

#2 動起來