纯CSS实现轮播图

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

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

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

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

所以，此次咱们尝试仅经过CSS实现一个不断播放的轮播图。ide

实现思路

经过animation达到动起来的效果，具体变化彷佛有两种可行方式：post

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

实现效果与代码

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

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

换上我们的奥运冠军们！动画

<!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>
复制代码