抽屉效果的轮播图

效果如上

使用css，通过计算，实现上面的动画效果。

代码：

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
    }

    ul {
        list-style: none;
        position: relative;
        width: 1000px;
        height: 397px;
        margin: 0 auto;
        overflow: hidden;
    }

    li {
        display: inline-block;
        position: absolute;
        overflow: hidden;
        transition: all 0.6s linear;
    }

    .slide-item:nth-of-type(1) {
        left: 0;
    }

    .slide-item:nth-of-type(2) {
        left: 200px;
    }

    .slide-item:nth-of-type(3) {
        left: 400px;
    }

    .slide-item:nth-of-type(4) {
        left: 600px;
    }

    .slide-item:nth-of-type(5) {
        left: 800px;
    }
</style>
<div id="main">
    <ul class="slide">
        <li class="slide-item"><img src="./img/blog-1.jpg" alt=""></li>
        <li class="slide-item"><img src="./img/blog-2.jpg" alt=""></li>
        <li class="slide-item"><img src="./img/blog-3.jpg" alt=""></li>
        <li class="slide-item"><img src="./img/blog-1.jpg" alt=""></li>
        <li class="slide-item"><img src="./img/blog-2.jpg" alt=""></li>
    </ul>
</div>
<script src="../jquery-3.3.1.js"></script>
<script>
    var lis = $('.slide-item');
    $('.slide').on('mouseover', 'li', function (event) {
        var index = $(this).index()
        $(this).css({
            left: 100 * index + 'px'
        })
        for (var i = 1; i < lis.length; i++) {
            if (i > index) {
                $(lis.eq(i)).css({
                    left: 1000 - 100 * (5 - i) + 'px'
                })
            }
            if (i < index) {
                $(lis.eq(i)).css({
                    left: 100 * i + 'px'
                })
            }
        }
    })
    $('.slide').on('mouseout', function (event) {
        for (var i = 0; i < lis.length; i++) {
            $(lis.eq(i)).css({
                left: ''
            })
        }
    })
</script>