文章目录
设置了一点小难度，不理解的话，是不能套用的哦！！！
（下方的圆圈与图片数量不统一，而且宽度是固定的）
下次写一些直接套用的，不整这些麻烦的了
功能
- 轮播
- 鼠标移入图片后会停止
- 鼠标移出图片后会继续进行轮播
- 左右两个按钮，可左右滑动
- 增加节流锁（防止快速点击左右按钮）
- 下方圆圈可快速进入目标图片
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);
}
图片
