当前位置：首页 > news >正文

前端小技巧之轮播图

news 2025/7/30 10:27:44

文章目录

功能
html
css
javaScript
图片

设置了一点小难度，不理解的话，是不能套用的哦！！！
（下方的圆圈与图片数量不统一，而且宽度是固定的）

下次写一些直接套用的，不整这些麻烦的了

功能

轮播
鼠标移入图片后会停止
鼠标移出图片后会继续进行轮播
左右两个按钮，可左右滑动
增加节流锁（防止快速点击左右按钮）
下方圆圈可快速进入目标图片

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="style.css"><script src="js.js" defer></script>
</head>
<body> <div id="main"><ul><li><img src="img/img12.jpeg" alt="亥猪"></li><li><img src="img/img1.jpeg" alt="子鼠"></li><li><img src="img/img2.jpeg" alt="丑牛"></li><li><img src="img/img3.jpeg" alt="寅虎"></li><li><img src="img/img4.jpeg" alt="卯兔"></li><li><img src="img/img5.jpeg" alt="辰龙"></li><li><img src="img/img6.jpeg" alt="巳蛇"></li><li><img src="img/img7.jpeg" alt="午马"></li><li><img src="img/img8.jpeg" alt="未羊"></li><li><img src="img/img9.jpeg" alt="申猴"></li><li><img src="img/img10.jpeg" alt="酉鸡"></li><li><img src="img/img11.jpeg" alt="戌狗"></li><li><img src="img/img12.jpeg" alt="亥猪"></li><li><img src="img/img1.jpeg" alt="子鼠"></li></ul><input type="button" id="left" value="<"><input type="button" id="right" value=">"><!-- 加一个列表 --><ul id = "selectLi"><li class="circle bgc" data-n="1"></li><li class="circle" data-n="4"></li><li class="circle" data-n="7"></li><li class="circle" data-n="10"></li></ul></div>
</body>
</html>

css

* {margin: 0;padding: 0;
}
#main {margin: auto;margin-top: 100px;width: 250px;height: 540px;background-color: aquamarine;overflow: hidden;position: relative;
}
div ul {position: absolute;top: 0px;left: -250px;width: 3500px;transition: 0s ease-in-out;
}
li {float: left;list-style: none;
}
div ul li img {width: 250px;
}
#main #left{width: 20px;height: 40px;z-index: 99;position: absolute;top: 300px;left: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #right{width: 20px;height: 40px;z-index: 99;float: right;position: absolute;top: 300px;right: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #selectLi {list-style: none;position: absolute;top: 450px;left: 50%;width: 160px;display: flex;justify-content: space-around;height: 20px;transform: translate(-50%, 0);z-index: 99;
}
#main #selectLi li{border-radius: 50%;height: 30px;width: 30px;text-align: center;cursor: pointer;
}
#main #selectLi .circle{background-color: rgba(255, 255, 255, 0.9);
}
#main #selectLi .bgc{background-color: #e74c3c;opacity: 0.9;
}

javaScript

let leftBtn = document.getElementById("left");
let rightBtn = document.getElementById("right");
let imgList = document.getElementsByTagName('ul')[0];
// 获取主元素
let main = document.getElementById("main");
main.style.height = imgList.style.height;// 图片索引
let index = 1;
rightBtn.addEventListener("click", ()=>{if(!lock) return;index ++;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 13){index = 1;setTimeout(() =>{imgList.style.left = "-250px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
})
leftBtn.addEventListener("click", ()=>{if(!lock) return;index --;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 0){index = 12;setTimeout(() =>{imgList.style.left = "-3000px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
})
// 获取小圆点
const circles = document.querySelectorAll(".circle");
// 高亮设置
function setCircles(){for(let i = 0; i < circles.length; i++){if(i === parseInt((index - 1) / 3)){circles[i].classList.add("bgc");}else{circles[i].classList.remove("bgc");}}// circles.forEach((item, index) => {  // 目标和索引// });
}
// 点击切换图片
const oCircle = document.getElementById("selectLi");
oCircle.addEventListener("click", (e)=>{if(e.target.nodeName.toLowerCase() === "li"){// 对应的值const n = Number(e.target.getAttribute("data-n"));index = n;imgList.style.left = index * (-250) + "px";imgList.style.transition = "0.5s ease-in-out";setCircles();}
})
// 函数优化
// 设置节流锁
let lock = true;
// 自动轮播
function handleRightBtn(){if(!lock) return;index ++;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 13){index = 1;setTimeout(() =>{imgList.style.left = "-250px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
}
let autoPlay = setInterval(handleRightBtn, 1000);
main.onmouseenter = function(){clearInterval(autoPlay);
}
main.onmouseleave = function(){clearInterval(autoPlay);autoPlay = setInterval(handleRightBtn, 1000);
}