無框架從零實現一個輪播圖 | 8月更文挑戰

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰javascript

既然前端大佬們說，「一個合格的前端至少也要可以達到會寫輪播圖」，做爲前端小白怎麼不就動手實現一下呢？css

實現思路是仿照着一個大佬的文章作的：產品經理：能不能讓這串數字滾動起來？html

把你要輪播的圖片橫着排列，而後絕對定位，再定義一個表明index的變量，點擊箭頭改變變量的值，再把變量映射到DOM的style屬性上，最後再用overflow: hidden;隱藏掉露在外面的那些圖前端

Talk is Cheap, Show me the Code!vue

實現過程當中有一個缺憾，但願實現大佬文章中的越界陰影效果，可是很遺憾目前還不知道怎麼實現。正在求教中~~java

實現中注意的點：markdown

如何給div綁定click事件：寫習慣了vue，一時不知道基礎HTML如何寫了。onclick綁定函數必定要寫小括號，即onclick="left"是不能夠的。函數
三張圖片，如何循環播放：將絕對定位的位置值設置爲總長度的餘數。如代碼中爲：a = (a+-300) % maxpost

<!DOCTYPE html>

<body class="center">
    <div class="showbox border">
        <div class="left border" onclick="left()">
            左
        </div>
        <div class="right border" onclick="right()">
            右
        </div>
        <div id="imgbox" class="center imgbox">
            <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>
</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: 1; */ background-color: rgba(0, 0, 0, 0.5); } .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: 3; */ opacity: 1; /* background-color: white; */ } .left { position: absolute; left: 0; top: 50%; cursor: pointer; background: blue; z-index: 4; } .right { position: absolute; right: 0; top: 50%; cursor: pointer; background: blue; z-index: 4; } .border { border: 1px solid black; } .centerimg { width: 100%; height: 100%; } .myimg { width: 300px; height: 300px; z-index: 2; opacity: 1; /* filter: alpha(opacity=60); */ } .imgbox { position: absolute; left: -300px; top: 0; } </style>

</html>
複製代碼

歡迎指正！flex