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); } ~~~