前端页面（使用html+js+css实现轮播图效果）
资源内容介绍
使用html+js+css实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><link rel="stylesheet" href="./iconfont.css"><style> body{ margin:0; padding: 0; } .container{ width:100vw; height:100vh; display: flex; align-items: center; justify-content: center; }.box{ width:500px; height:300px; position:relative; overflow: hidden;}img{ position:absolute; width:500px; height:300px; transition: .5s linear;}.circle{ position: absolute; bottom: 20px; right:45%}ul{ list-style: none;}ul li{ width:10px; height:10px; margin-right:5px; border-radius: 50%; background-color: #ffffff; opacity: 0.7; float: left;}.left{ position: absolute; background-color: black; color: #fff; width:40px; height:30px; line-height: 30px; text-align: center; left:-10px; opacity: 0.4; border-radius: 35%; bottom: 150px;}ul:hover{ cursor: pointer;}li:nth-child(1){ background-color: #eca20c;}.left:hover{ opacity: 1;}.right{ position: absolute; right: -10px; background-color: black; color: #fff; width:40px; height:30px; opacity: 0.4; border-radius: 35%; line-height: 30px; text-align: center; bottom: 150px;}.right:hover{ opacity: 1;}.fore{ width: 560px; height:360px; display: flex; justify-content: center; align-items: center; background-color: antiquewhite; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.2);}</style><body><div class="container"> <div class="fore"> <div class="box"> <img src="图片1.jpg" /> <img src="图片2.jpg"/> <img src="图片3.jpg"/> <img src="图片4.jpg"/> <img src="图片5.jpg"/> <div class="circle"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span class="iconfont icon-back-line-free left"></span> <span class="iconfont icon-enter-line-free right"></span> </div> </div></div></body><script> let allImg = document.querySelectorAll("img") let container = document.querySelector(".box") let index = 0 let circle; let lockTag = true let btn = document.querySelectorAll("li") function change(){ circle = setInterval(function () { index = (index + 1) % allImg.length for (let i = 0; i < allImg.length; i++) { allImg[i].style.opacity = "0" btn[i].style.backgroundColor="#ffffff" } btn[index].style.backgroundColor="#eca20c" allImg[index].style.opacity = "1" }, 5000); } change() let left = document.querySelector('.left') let right = document.querySelector(".right") left.addEventListener('click', function (){ if(!lockTag) return clearInterval(circle) if (index === 0){ index = allImg.length - 1 } else{ index-- } for (let i = 0; i < allImg.length; i++) { allImg[i].style.opacity = "0" btn[i].style.backgroundColor="#ffffff" } btn[index].style.backgroundColor="#eca20c" allImg[index].style.opacity="1" change() lockTag = false setTimeout(function(){ lockTag = true },500) }) right.addEventListener('click', function (){ if (!lockTag) return clearInterval(circle) index = (index + 1) % allImg.length for (let i = 0; i < allImg.length; i++) { allImg[i].style.opacity = "0" btn[i].style.backgroundColor="#ffffff" } btn[index].style.backgroundColor="#eca20c" allImg[index].style.opacity="1" change() lockTag = false setTimeout(function(){ lockTag = true },500) }) for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click",function(){ clearInterval(circle) index = i for (let j = 0; j < allImg.length;j ++){ allImg[j].style.opacity = "0" btn[j].style.backgroundColor="#ffffff" } btn[index].style.backgroundColor="#eca20c" allImg[index].style.opacity="1" change() }) } container.addEventListener("mouseenter", function(){ clearInterval(circle) }) container.addEventListener("mouseleave", function(){ clearInterval(circle) circle = setInterval(function () { index = (index + 1) % allImg.length for (let i = 0; i < allImg.length; i++) { allImg[i].style.opacity = "0" btn[i].style.backgroundColor="#ffffff" } btn[index].style.backgroundColor="#eca20c" allImg[index].style.opacity = "1" }, 5000); })</script></html>