<title>轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; } .swiper { width: 1226px; height: 460px; margin: 0 auto; position: relative; } .swiper .imgList { width: 100%; height: 100%; } .swiper .imgList img { width: 100%; height: 100%; } .imgList .img { opacity: 0; transition: all 0.4s; } .imgList .img.active { opacity: 1; } .imgList { position: relative; } .imgList .img { position: absolute; } .btn { width: 80px; height: 60px; background-color: #0070C9; color: whitesmoke; font-size: 30px; line-height: 54px; text-align: center; position: absolute; top: calc(50% - 30px); cursor: pointer; opacity: 0.36; } .btn.pre { left: 0; } .btn.next { right: 0; } .dotList { width: 180px; height: 80px; position: absolute; bottom: 0px; right: 0px; display: flex; align-items: center; justify-content: space-evenly; } .dot { width: 16px; height: 16px; background-color: red; border-radius: 8px; /* opacity: 0.5; */ } .dotActive { background-color: black; } </style> </head> <body> <div class="swiper"> <div class="imgList"> <div class="img active"><img src="img/img1.webp" ></div> <div class="img"><img src="img/img2.jpg" ></div> <div class="img"><img src="img/img3.webp" ></div> <div class="img"><img src="img/img4.webp" ></div> <div class="img"><img src="img/img5.webp" ></div> </div> <div class="btn pre"><</div> <div class="btn next">></div> <div class="dotList"> <span class="dot dotActive"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> <script> var btnPre = document.querySelector(".pre"); var btnNext = document.querySelector(".next"); var imgList = document.querySelectorAll(".img"); var dotList = document.querySelectorAll(".dot") var imgIndex = 0; var time1 = setInterval(next, 3000); // 自动播放轮播图 btnNext.onclick = function () { next();//显示下一张图 clearInterval(time1); //清除自动显示下一张 } btnPre.onclick = function () { pre();//显示上一张图 clearInterval(time1); //清除自动显示下一张 } function next() { //显示下一张图 imgList[imgIndex].classList.remove("active");//移除当前图片的active，隐藏当前图片 if(imgIndex == imgList.length - 1) { //如果索引是等于最后一张图，就直接等于-1，因为下面可以加一补回到索引为0 imgIndex = -1; } imgIndex += 1; //下一张图，索引要加1 imgList[imgIndex].classList.add("active"); //下一张图添加active， 使得下一张图显示出来 dotAct(); //调用，设置当前索引对应的点 } function pre() { // 显示上一张图 imgList[imgIndex].classList.remove("active"); if(imgIndex == 0) { imgIndex = imgList.length; } imgIndex -= 1; imgList[imgIndex].classList.add("active"); clearInterval(time1); dotAct() } function dotAct() { dotList.forEach(function(item, index) { item.classList.remove("dotActive"); //移除所有点的dotActive样式 }) dotList[imgIndex].classList.add("dotActive"); // 设置当前索引对应的点 } // btnPre.onclick = function () { //第一次写的显示上一张 // if(imgIndex <= 0) { // imgList[imgIndex].classList.remove("active"); // imgIndex = imgList.length; // } // if(imgIndex < imgList.length) { // imgList[imgIndex].classList.remove("active"); // } // imgIndex -= 1; // imgList[imgIndex].classList.add("active"); // clearInterval(time1); // dotAct() // } </script> </body>
还有点击小点没做
