圖片輪播的場景，在 PC 和手機端都是很常見的。最早的時候，都是用的第三方庫，比如 Bootstrap，react swipe。但是有時候我們的業務很簡單，并不需要這些插件自帶的很多其它功能。加上之前在微博看到某前端大神在吐槽。

來面試前端的，麻煩先把圖片輪播實現出來。

雖然看完之后，有種躺槍的感覺，但是自己確實沒有仔細想過要怎樣實現。所以在某個陽光明媚的早晨，決定動手實現一下，最后發現原來這么簡單 :)。下面說下這個過程。

先是靜態 UI。

<style>
    .container {
        position: relative;
        width: 500px;
        margin: 0 auto;
        height: 300px;
    }
    
    .item {
        height: 100%;
        width: 100%;
        position: absolute;
    }
    
    #item1 {
        background-color: #FD9827;
    }
    
    #item2 {
        background-color: #47B784;
    }
    
    .btn {
        background: rgba(0, 0, 0, 0.28);
        border-radius: 50%;
        display: block;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        line-height: 40px;
        position: absolute;
        width: 40px;
        text-align: center;
        top: 100px;
    }

    #pre {
        left: 10px;
    }

    #next {
        right: 10px;
    }
</style>

<div class="container">
    <div class="item" id="item1"></div>
    <div class="item" id="item2"></div>

    <span class="btn" id="pre"><</span>
    <span class="btn" id="next">></span>
</div>

然后給兩個按鈕加上點擊事件，此外還要加上兩個顯示和隱藏的類，以及修改兩個背景圖的初始化狀態。

<style>
    .hide {
        opacity: 0;
    }

    .show {
        opacity: 1;
    }
</style>

<div class="item show" id="item1"></div>
<div class="item hide" id="item2"></div>
<span class="btn" id="pre" onclick="toggle()"><</span>
<span class="btn" id="next" onclick="toggle()">></span>

<script>
function getByID(id) {
    return document.getElementById(id)
}

let index = 1
let item1 = getByID('item1')
let item2 = getByID('item2')

function toggle() {
    if (index === 1) {
        item1.className = 'item hide'
        item2.className = 'item show'
        index = 2
    } else {
        item2.className = 'item hide'
        item1.className = 'item show'
        index = 1
    }
}
</script>

這樣子，基本上就能達到切換圖片的效果了。當然，我還想加多點動畫效果，讓圖片能從左邊滑進來，從右邊滑出去。修改下顯示和隱藏兩個類，以及給父元素加一個 overflow: hidden。

<style>
    .container {
        position: relative;
        height: 300px;
        width: 500px;
        margin: 0 auto;
        overflow: hidden;
    }
    
    .hide {
        animation: fadeRightOut 1s forwards;
    }

    .show {
        animation: fadeLeftIn 1s forwards;
    }

    @keyframes fadeRightOut {
        0% {
            transform: translate(0, 0);
            visibility: visible;
        }
        100% {
            transform: translate(100%, 0);
            visibility: hidden;
        }
    }

    @keyframes fadeLeftIn {
        0% {
            transform: translate(-100%, 0);
            visibility: hidden;
        }
        100% {
            transform: translate(0, 0);
            visibility: visible;
        }
    }
</style>

這樣，一個基本的輪播組件就算完成了，然后就可以開始去面試了:)。

后記

Github 上面有個庫，You-Dont-Need-Javascript，介紹了一些不用 JS 就能實現出來的效果，里面也包含了圖片輪播。里面的一些做法，作為加深對 CSS 的理解，開開眼界就好。如果用在了工作的項目當中，無疑加大了代碼的維護成本。