今天是大年三十，猴年最後一天。為了完成自己在年初定的每週一篇前端週記的目標，又因為之後就要開啟瘋狂百年模式，所以決定在今天的年夜飯前抽出點時間來完成猴年的最後一篇週記

之前的幾篇週記都是和js相關，但是我們大前端不只有js啊，還有神奇的css

相信很多小夥伴做過的專案裡面都有輪播圖這麼一個需求，有的小夥伴可能會自己造輪子，有的小夥伴可能會直接Google輪播圖外掛

但是如果不使用javascript，能不能實現輪播圖的效果呢？可能小夥伴們並沒有考慮過這個問題，那麼下面我們就一起來用css實現一個簡易的輪播圖

基本需求分析

由於css無法做到js一樣的精準操控，所有某些效果是無法實現的，比如在輪播的同時支援使用者左右滑動，所以使用css智慧實現基本的效果。下面列出來的內容就是我們實現的：

在固定區域中，內部內容自行滑動切換形成播放的效果

當切換到最後一張內容時，會反向播放或者回到起點重播

每張內容會停留一段時間，讓使用者能夠看清楚

內容可以點選/進行操作

dom結構搭建

首先要有一個容器作為輪播圖的容器，同時由於要實現滑動切換，所以內部需要有一個裝載所有待切換內容的子容器

如果子容器中的內容是左右切換的，則需要將內容左右排列開

下面以輪播圖片為例，上程式碼

。loop-wrap 是主容器

。loop-images-container 是承載內部圖片的子容器

。loop-image 是圖片內容，如果需要顯示其他內容，可以自定義

css實現靜態效果

輪播圖內每一頁內容的寬高應該相同，且等於主容器。loop-wrap寬高

。loop-images-container的寬高必然有一個大於外部主容器，overflow屬性應該設定為hidden。那為什麼不設定為auto呢？我不告訴你，你可以自己試試看？？？

。loop-wrap {

position： relative；

width： 500px；

height： 300px；

margin： 100px auto；

overflow： hidden；

}

。loop-images-container{

position： absolute；

left： 0； top： 0；

width： 500%； /* 橫向排列 5張圖片 寬度應為主容器5倍 */

height： 100%；

font-size： 0；

}

。loop-image{

width： 500px；

height： 300px；

}

下面在瀏覽器中開啟頁面，就可以看到不帶輪播效果的靜態頁面了，除了第一張圖片，其他圖片都不可見

css實現輪播效果

輪播效果說到底就是一個動畫效果，而透過css3的新屬性 animation 我們就可以自定義一個動畫來達到輪播圖效果。下面先來了解一下 animation 這個屬性

/*

animation： name duration timing-function delay iteration-count direction

name： 動畫名

duration： 動畫持續時間 設定為0則不執行

timing-function：動畫速度曲線

delay：動畫延遲開始時間 設定為0則不延遲

iteration-count：動畫迴圈次數 設定為infinite則無限次迴圈

direction：是否應該輪流反向播放動畫 normal 否 alternate 是

*/

animation 的 name 值是動畫名，動畫名可以透過 @keyframes 建立自定義動畫規則

分析動畫

要實現輪播，本質上是使內部承載內容的子容器 。loop-images-container 進行位移，從而使不同位置的內容一次展示在使用者眼前

共有五張圖片需要展示，如果輪播總耗時10s，那麼每張圖片應該有2s的時間（20%），而每張圖片耗時的構成是切換耗時+展示耗時，如果切換耗時500ms（5%），展示耗時就應該是1500ms（15%）

於是這樣改造css

。loop-images-container{

position： absolute；

left： 0； top： 0；

width： 500%；

height： 100%；

font-size： 0；

transform： translate（0，0）； /* 初始位置位移 */

animation： loop 10s linear infinite；

}

/* 建立loop動畫規則 */

/*

輪播5張，總耗時10s，單張應為2s（20%）

單張切換動畫耗時500ms，停留1500ms

*/

@keyframes loop {

0% {transform： translate（0，0）；}

15% {transform： translate（0，0）；} /* 停留1500ms */

20% {transform： translate（-20%，0）；} /* 切換500ms 位移-20% */

35% {transform： translate（-20%，0）；}

40% {transform： translate（-40%，0）；}

55% {transform： translate（-40%，0）；}

60% {transform： translate（-60%，0）；}

75% {transform： translate（-60%，0）；}

80% {transform： translate（-80%，0）；}

95% {transform： translate（-80%，0）；}

100% {transform： translate（0，0）；} /* 復位到第一張圖片 */

}

噹噹噹當~~~純css實現輪播圖效果完成

想要直接看效果的小夥伴可以猛戳下面的連結

純css實現輪播圖效果

這是一個方向的輪播效果，想要實現往返方向的輪播效果，小夥伴們可以試試direction的alternate，但是自定義動畫規則的時間間隔也要重新計算了哦！

總結

雖然css也能實現輪播效果，但是相對於js實現來說，功能性就弱了很多，無法控制暫停與播放，無法與使用者產生互動，無法監聽到狀態的而變化等等，但是好處也很明顯嘛！那就是。。。夠簡單？？？

我知道這篇有點水了，但是實在是按捺不住馬上就要過年的激動心情啊！！！那麼在這猴年的最後一天，希望大家新年快樂，技術越來越精湛，口袋越來越飽滿，愛情越來越纏綿，事業越來越紅火，家庭越來越美滿！也祝我自己新年目標都能順利完成，自己的道路能夠一帆風順！

雞年大吉吧！！！？？？