純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>
複製代碼