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

之前的幾篇周記都是和js相關(guān)，但是我們大前端不只有js啊，還有神奇的css

相信很多小伙伴做過的項目里面都有輪播圖這么一個需求，有的小伙伴可能會自己造輪子，有的小伙伴可能會直接Google輪播圖插件

但是如果不使用javascript，能不能實現(xiàn)輪播圖的效果呢？可能小伙伴們并沒有考慮過這個問題，那么下面我們就一起來用css實現(xiàn)一個簡易的輪播圖

auto-loop.png

基本需求分析

由于css無法做到j(luò)s一樣的精準操控，所有某些效果是無法實現(xiàn)的，比如在輪播的同時支持用戶左右滑動，所以使用css智能實現(xiàn)基本的效果。下面列出來的內(nèi)容就是我們實現(xiàn)的：

1. 在固定區(qū)域中，內(nèi)部內(nèi)容自行滑動切換形成播放的效果
2. 當切換到最后一張內(nèi)容時，會反向播放或者回到起點重播
3. 每張內(nèi)容會停留一段時間，讓用戶能夠看清楚
4. 內(nèi)容可以點擊/進行操作

dom結(jié)構(gòu)搭建

首先要有一個容器作為輪播圖的容器，同時由于要實現(xiàn)滑動切換，所以內(nèi)部需要有一個裝載所有待切換內(nèi)容的子容器

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

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

<div class="loop-wrap">
    <div class="loop-images-container">
        < img src="darksky.jpg" alt="" class="loop-image">
        < img src="starsky.jpg" alt="" class="loop-image">
        < img src="whiteland.jpg" alt="" class="loop-image">
        < img src="darksky.jpg" alt="" class="loop-image">
        < img src="starsky.jpg" alt="" class="loop-image">
    </div>
</div>

.loop-wrap 是主容器
.loop-images-container 是承載內(nèi)部圖片的子容器
.loop-image 是圖片內(nèi)容，如果需要顯示其他內(nèi)容，可以自定義

css實現(xiàn)靜態(tài)效果

輪播圖內(nèi)每一頁內(nèi)容的寬高應(yīng)該相同，且等于主容器.loop-wrap寬高

.loop-images-container的寬高必然有一個大于外部主容器，overflow屬性應(yīng)該設(shè)置為hidden。那為什么不設(shè)置為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張圖片 寬度應(yīng)為主容器5倍 */
    height: 100%;
    font-size: 0;
}

.loop-image{
    width: 500px;
    height: 300px;
}

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

css實現(xiàn)輪播效果

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

/*
animation: name duration timing-function delay iteration-count direction

name: 動畫名
duration： 動畫持續(xù)時間 設(shè)置為0則不執(zhí)行
timing-function：動畫速度曲線
delay：動畫延遲開始時間 設(shè)置為0則不延遲
iteration-count：動畫循環(huán)次數(shù) 設(shè)置為infinite則無限次循環(huán)
direction：是否應(yīng)該輪流反向播放動畫 normal 否 alternate 是
*/

animation 的 name 值是動畫名，動畫名可以通過 @keyframes 創(chuàng)建自定義動畫規(guī)則

分析動畫

要實現(xiàn)輪播，本質(zhì)上是使內(nèi)部承載內(nèi)容的子容器 .loop-images-container 進行位移，從而使不同位置的內(nèi)容一次展示在用戶眼前

共有五張圖片需要展示，如果輪播總耗時10s，那么每張圖片應(yīng)該有2s的時間(20%)，而每張圖片耗時的構(gòu)成是切換耗時+展示耗時，如果切換耗時500ms(5%)，展示耗時就應(yīng)該是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;
}

/* 創(chuàng)建loop動畫規(guī)則 */
/* 
   輪播5張，總耗時10s，單張應(yīng)為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);} /* 復(fù)位到第一張圖片 */
}

當當當當~~~純css實現(xiàn)輪播圖效果完成

想要直接看效果的小伙伴可以猛戳下面的鏈接

純css實現(xiàn)輪播圖效果

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

總結(jié)

雖然css也能實現(xiàn)輪播效果，但是相對于js實現(xiàn)來說，功能性就弱了很多，無法控制暫停與播放，無法與用戶產(chǎn)生交互，無法監(jiān)聽到狀態(tài)的而變化等等，但是好處也很明顯嘛！那就是。。。夠簡單??????

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

雞年大吉吧?。。??????