纯CSS实现轮播图这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战在之前的文章：无框架从零实现一个轮播图

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

在之前的文章：无框架从零实现一个轮播图 | 8月更文挑战，通过Javascript和CSS配置，实现了一个简单的轮播图。

后面通过：纯CSS实现文字闪烁效果，纯CSS做旋转不断的效果，学习了CSS中的动画知识，包括：

CSS动画animation与CSS转换相关的transform。

因此，这次我们尝试仅通过CSS实现一个不断播放的轮播图。

实现思路

通过animation达到动起来的效果，具体变化似乎有两种可行方式：

在动画中，通过CSS-transform不断平移轮播图元素位置；
在动画中，设置不同的left值。

实现效果与代码

其中值得注意的点在于需要手动在轮播图头部添加最后一张图的复制，否则会有明显的闪动效果。

实现效果如下图（不屏蔽越界元素）：

换上咱们的奥运冠军们！

<!DOCTYPE html>

<body class="center">
    <div style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);" class="border">
        left
    </div>
    <div class="showbox border box-shadow">
        <div class="left border">
            左
        </div>
        <div class="right border">
            右
        </div>
        <div id="imgbox" class="center imgbox">
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/20/23/mountains-6508015_960_720.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2021/07/29/21/03/cereals-6508088__340.jpg" />
            <img class="myimg" src="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg" />
        </div>
    </div>
    <div  style="flex: 1;height: 300px;z-index: 10;box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.99);" >
        right
    </div>
</body>
<!-- <script>
    let a = 0
    let max = 300 * 3;
    window.onload = function() {
        refresh();
    }

    function refresh() {
        document.getElementById("imgbox").style.left = a + "px";
    }

    function left() {
        a = (a-300)%max;
        refresh();
    }

    function right () {
        a = (a+300)%max;
        refresh();
    }

</script> -->
<style>
    body {
        width: 100%;
        height: 100%;
        z-index: 0;
        /* background-color: rgba(0, 0, 0, 0.5); */
        box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.1);
    }

    .center {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .showbox {
        width: 300px;
        height: 300px;
        /* background: chocolate; */
        position: relative;
        overflow: visible;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* z-index: -1; */
        opacity: 1;
    }

    .left {
        position: absolute;
        left: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .right {
        position: absolute;
        right: 0;
        top: 50%;
        cursor: pointer;
        background: blue;
        z-index: 100;
    }

    .border {
        border: 1px solid black;
    }

    .centerimg {
        width: 100%;
        height: 100%;
    }

    .myimg {
        width: 300px;
        height: 300px;
        z-index: -1;
        opacity: 1;
        /* filter: alpha(opacity=60); */
    }
    .imgbox {
        position: absolute;
        left: -600px;
        top: 0;
        z-index: -1;
        animation: slideshow 10s both infinite;
    }

    @keyframes slideshow {
        0% {
            left: -900px;
        }
        33% {
            left: -600px;
        }
        66% {
            left: -300px;
        }
        100% {
            left: 0;
        }
    }
</style>

</html>