手写图片轮播

图片轮播的场景，在 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 的理解，开开眼界就好。如果用在了工作的项目当中，无疑加大了代码的维护成本。