js輪播實現 · javascript

html ~~~ <link rel="stylesheet" href="css/lunbo.css"> </head> <body> <div class="conter" id="conter"> <div class="list" id="list" style="left:0px"> <img src="現代美女/01.png" alt=""> <img src="現代美女/02.png" alt=""> <img src="現代美女/03.png" alt=""> <img src="現代美女/04.png" alt=""> <img src="現代美女/05.png" alt=""> </div> <div class="qian" id="qian"></div> <div class="hou" id="hou"></div> <div class="button" id="button"> <span class="cur"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> // 前后箭頭js var conter = document.getElementById("conter"); var list = document.getElementById("list"); var qian = document.getElementById("qian"); var hou = document.getElementById("hou"); var buttons = document.querySelectorAll(".button span"); var Value = parseInt(list.style.left); var count = 0; // 首先要設置一個變量（全局變量）記錄左右按鈕的點擊次數圖片移動用這個變量裝下標 // 簡單點就是說使用一個全局變量把所有的東西都串起來 console.log(Value); hou.onclick = function () { count++; if (count == 5) { count = 0; } if (Value > -2400) { Value = -600 * count; } else { Value = 0; } list.style.left = Value + "px"; // 下面的span對應改變 for (let i = 0; i < 5; i++) { if (count == i) { buttons[count].classList.add("cur"); } else { buttons[i].classList.remove("cur"); } } } // qian.onclick = function () { count--; if (count == -1) { count = 4; } if (Value >= -2400) { Value = count * -600; } else { Value = 0; } list.style.left = Value + "px"; // 下面的span對應改變 for (let i = 0; i < 5; i++) { if (count == i) { buttons[count].classList.add("cur"); } else { buttons[i].classList.remove("cur"); } } } // span 切換 for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { count = i; for (let i = 0; i < buttons.length; i++) { buttons[i].classList.remove("cur"); } this.classList.add("cur"); // 對應圖片切換 list.style.left = i * (-600) + "px"; } } // </script> </body> ~~~ css ~~~ *{margin: 0;padding: 0} .conter{ overflow: hidden; margin-left: auto; margin-right: auto; position: relative; width: 600px; height: 400px; border: 1px solid #333; } .list{ position: absolute; width: 42000px; height: 400px; } .list img{ /* display: none; */ float: left; } .qian,.hou{ width: 42px; height: 68px; overflow: hidden; top: 160px; position: absolute; z-index: 100; background: url("../現代美女/icon-slides.png"); } .hou{ right: 0; background-position-x: 125px; } .button{ position: absolute; z-index:150; bottom: 10px; left:50%; transform: translateX(-50%); } .button span{ cursor: pointer; display: inline-block; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; } .cur{ background: rgb(166, 238, 83); } ~~~