超哥輪播js · javascript

html ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="container"> <div class="list" id="list" style="left:-600px"> <img src="images/05.png" alt=""> <img src="images/01.png" alt=""> <img src="images/02.png" alt=""> <img src="images/03.png" alt=""> <img src="images/04.png" alt=""> <img src="images/05.png" alt=""> <img src="images/01.png" alt=""> </div> <button id="prev"></button> <button id="next"></button> <div id="btns"> <span class="current"></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var container = document.getElementById("container"); var list = document.getElementById("list"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var btns = document.getElementById("btns").children; // 記錄焦點變化的位置 var index = 0; var timer; var animated = false; // 1.點擊next,left加-600,當left<-3000時,left值等于-600 next.onclick = function () { if(animated){ return false; } index++; if (index > 4) { index = 0; } showBtn(); animate(-600) } prev.onclick = function () { if(animated){ return false; } index--; if (index < 0) { index = 4 } showBtn(); animate(600) } // 點擊焦點換圖 for (let i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onclick = function () { var offset = (this.index - index) * -600; // index記錄焦點變化的位置 index = this.index; animate(offset); showBtn(); } } function showBtn() { for (let i = 0; i < btns.length; i++) { btns[i].classList.remove("current"); } btns[index].classList.add("current"); } function animate(offset) { animated = true; let time = 300; let interval = 10; let speed = offset / (time / interval); let newLeft = parseInt(list.style.left) + offset; function go() { let leftValue = parseInt(list.style.left); if ((speed < 0 && leftValue > newLeft) || (speed > 0 && leftValue < newLeft)) { list.style.left = leftValue + speed + "px" setTimeout(go, interval) } else { animated = false; if (newLeft > -600) { list.style.left = -3000 + "px" } else if (newLeft < -3000) { list.style.left = -600 + "px"; } else { list.style.left = newLeft + "px"; } } } go(); } </script> </body> </html> ~~~ css ~~~ *{margin:0;padding:0} .container{ margin-left: auto; margin-right: auto; width:600px;height:400px; border:1px solid #333;position: relative; overflow: hidden; } .list{ position: absolute; width:4200px; height:400px; } .list img{ float: left; } #prev,#next{ cursor: pointer; background: url("../images//icon-slides.png"); width:40px;height:69px;position: absolute; z-index: 100;border: none; top:50%;transform: translateY(-50%); } #next{ right:0; background-position-x:-43px; } #btns{ left:50%;transform: translateX(-50%); bottom: 20px; position: absolute;z-index:101; } #btns span{ cursor: pointer; display: inline-block; width:25px;height:25px; background: rgba(51, 51, 51, 0.493); border-radius: 50%; } #btns .current{ background:#ff8936 } ~~~