<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;} div { width: 670px; border: 1px solid red; margin: 100px auto; position: relative; } div>img { vertical-align: bottom; } p { position: absolute; width: 100%; left: 0px; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; } p>span { display: inline-block; width: 30px; height: 60px; line-height: 60px; text-align: center; font-size: 40px; color: #FFF; background: rgba(0,0,0,0.5); } </style> </head> <body> <div> <img src="images/ad1.jpg" alt=""> <p> <span id="pre"><</span> <span id="next">></span> </p> </div> <script type="text/javascript"> let qq=document.querySelector("img"); let preBtn = document.querySelector("#pre"); let nextBtn = document.querySelector("#next"); let images=["images/ad1.jpg", "images/ad2.jpg", "images/ad3.jpg", "images/ad4.jpg", "images/ad5.jpg",]; let currentIndex=0; let maxIndex=images.length-1; preBtn.onclick=function() { currentIndex--; if(currentIndex<0) { currentIndex=maxIndex; } qq.src=images[currentIndex]; } nextBtn.onclick=function() { currentIndex++; if(currentIndex>maxIndex) { currentIndex=0; } qq.src=images[currentIndex]; } </script> </body> </html>
dom啦12 简易轮播图
关注
打赏
