前端页面（使用html+js+css实现轮播图效果） 11.38MB

kuailezzf需要积分:2(1积分=1元)

资源文件列表:

轮播图.zip 大约有9个文件

轮播图/
轮播图/iconfont.css 402B
轮播图/iconfont.ttf 1.7KB
轮播图/lunbotu.html 5.33KB
轮播图/图片1.jpg 1.3MB
轮播图/图片2.jpg 5.32MB
轮播图/图片3.jpg 2.16MB
轮播图/图片4.jpg 855.85KB
轮播图/图片5.jpg 1.93MB

资源介绍:

使用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>

标题	大小	时间
typst Windows 安装包	13.98MB	9月前

vm的远程登录软件SecureCRTPortable和MobaXterm-Personal	64.19MB	9月前
迈德威视SDK同时驱动4个工业相机实时视频采集及显示	11.05KB	9月前
spark课程设计任务	21MB	9月前
11111111111111111	17.09MB	9月前

使用kettle进行商品销售数据清洗整合处理	3.12MB	9月前
PYQT连接MYSQL登录界面	1.46MB	9月前
人脸数据集.vol文件	1.29MB	9月前