内容
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示;当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字，会随图片切换一起进行切换。
实验原理
计时器使图片滚动
绑定按钮使图片根据点击运动
对图片设置优先级，使图片堆叠
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>轮播图</title> <link rel="stylesheet" href="./main.css" /> <script src="./main.js"></script> </head> <body> <div class="out"> <div class="inner"> <div class="img"> <img src="./imgs/1.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/2.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/3.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/4.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/5.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/6.jpg" alt="" /> </div> <div class="img"> <img src="./imgs/7.jpg" alt="" /> </div> </div> <div class="arrow"> <i class="left">《</i> <i class="right">》</i> </div> <div class="button"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> </body> </html>
css
* { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; background: linear-gradient(#1d2b48, #4f4266); } .out { width: 800px; height: 200px; position: relative; margin: 0 auto; top: 100px; } .out .inner { width: 100%; height: 100%; } .out .inner .img { width: 400px; height: 200px; position: absolute; transition: 0.3s; } .out .inner .img img { width: 100%; height: 100%; } .out .arrow { font-size: 32px; } .out .arrow i { position: absolute; color: #fff; z-index: 9999; cursor: pointer; top: 84px; } .out .arrow .left { left: 0; } .out .arrow .right { left: 780px; } .out .button { width: 175px; height: 15px; position: absolute; z-index: 9999; left: 50%; transform: translateX(-50%); } .out .button p { width: 15px; height: 15px; float: left; margin: 0 5px; cursor: pointer; background-color: silver; } .out .button p:first-child { background-color: #1486bb; } .out #last { transform: translateX(0); z-index: 9; opacity: 1; } .out #first { transform: translateX(200px) scale(1.3); z-index: 99; opacity: 1; } .out #second { transform: translateX(400px); z-index: 9; opacity: 1; } .out #left { transform: translateX(-100px); z-index: 1; opacity: 0; } .out #right { transform: translateX(500px); z-index: 1; opacity: 0; }
JS
window.onload = () => { var img = document.querySelectorAll(".img"); var left = document.querySelector(".left"); var right = document.querySelector(".right"); var buttons = document.querySelectorAll("p"); //设置一个数组，用来存id idArr = ["first", "second", "right", "left", "left", "left", "last"]; //设置一个变量用来当图片的索引 var index = 0; initialize(); //设置一个定时器，让图片轮播 var timer = setInterval(next, 3000); //给箭头绑定点击事件 left.addEventListener("click", prev); //当鼠标放到箭头上时，让定时器停止 left.addEventListener("mouseover", () => { clearInterval(timer); timer = null; }); //当鼠标离开箭头时，让定时器重新开始 left.addEventListener("mouseout", () => { timer = setInterval(next, 3000); }); right.addEventListener("click", next); right.addEventListener("mouseover", () => { clearInterval(timer); timer = null; }); right.addEventListener("mouseout", () => { timer = setInterval(next, 3000); }); //给小方块添加点击事件 for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener("mousedown", () => { //在用户点击的时候关闭定时器 clearInterval(timer); timer = null; //这里需要判断用户点击的小方块与当前图片的索引之差，如果 //大于0，则表明用户需要更换的是后面的图片，反之，表明用户 //需要更换之前也就是前面的图片 if (index > i) { let x = index - i; while (x--) { prev(); } } else if (index < i) { let x = i - index; while (x--) { next(); } } }); buttons[i].addEventListener("mousedown", () => { timer = setInterval(next, 3000); //让图片继续动起来 }) } //创建切换图片的函数 function prev() { //切换上一张也就是让数组的最后一个元素变成第一个元素 idArr.push(idArr.shift()); initialize(); if (index === 0) { index = buttons.length - 1; } else { index--; } clearColor(); } function next() { //跟上面反过来 idArr.unshift(idArr.pop()); initialize(); if (index === buttons.length - 1) { index = 0; } else { index++; } clearColor(); } //创建一个函数用来让小方块跟随图片运动 function clearColor() { for (let i = 0; i < buttons.length; i++) { buttons[i].style.backgroundColor = "silver"; } //让当前的索引变色 buttons[index].style.backgroundColor = "rgb(20, 134, 187)"; } //创建一个函数用来初始化图片 function initialize() { for (let i = 0; i < img.length; i++) { img[i].id = idArr[i]; } } };
实验效果
堆叠式轮播图
