内容
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];
}
}
};
实验效果
堆叠式轮播图
