HTML结构代码：
<div id="box">
<div id="img">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg" alt="">
<img src="img/01.jpg" alt="">
</div>
<div id="direction">
<div>⬅</div>
<div>➡</div>
</div>
<div id="list">
<span style="background-color: rgba(255, 0, 0, 1);"></span>
<span></span>
<span></span>
</div>
</div>css结构代码：
<style>
* {
margin: 0;
padding: 0;
}
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#box {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
#img {
width: 400%;
height: 100vh;
display: flex;
justify-content: space-around;
}
#img img {
width: 25%;
height: 100vh;
}
#direction {
width: 100%;
height: 5vh;
position: absolute;
top: 45%;
display: flex;
justify-content: space-between;
}
#direction div {
width: 5%;
height: 5vh;
text-align: center;
border-radius: 10px;
line-height: 5vh;
font-size: 16px;
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
overflow: hidden;
}
#list {
width: 100%;
height: 5vh;
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
}
#list span {
display: block;
width: 3%;
height: 3vh;
margin: 5px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 1);
}
</style>JavaScript的代码：
<script>
// 获取到所有图片的父级div
let img = document.getElementById("img");
// 获取到所有的图片
let imgs = img.children;
console.log(imgs);
// 获取到图片的宽度
let imgWidth = imgs[0].offsetWidth;
console.log(imgWidth);
// 获取到左右箭头按钮
let but = document.getElementById("direction").children;
console.log(but);
// 获取到最大的div 包含图片，按钮，小圆点
let box = document.getElementById("box");
// 下标
let k = 0;
// 获取到所有的小圆点
let list = document.getElementById("list").children;
console.log(list);
// 页面打开设定永久性定时器，两秒执行一次
let int = setInterval(stats, 2000);
// 自动轮播事件
function stats() {
// 下标+1
k++;
// 设定过渡时间为1秒
img.style.transition = "all 1s";
img.style.marginLeft = '-' + k * imgWidth + "px";
//
if (k == imgs.length - 1) {
setTimeout(function() {
k = 0;
img.style.transition = "";
img.style.marginLeft = "0px";
}, 1000);
list[0].style.backgroundColor = "rgba(255,0,0,1)";
list[list.length - 1].style.backgroundColor = "rgba(0,0,0,1)";
} else {
list[k - 1].style.backgroundColor = "rgba(0,0,0,1)";
list[k].style.backgroundColor = "rgba(255,0,0,1)";
}
}
// 鼠标移入最大的div时清除定时器
box.onmouseover = function() {
clearInterval(int);
}
// 移出时设定定时器，开始轮播
box.onmouseout = function() {
int = setInterval(stats, 2000);
}
// 右箭头绑定点击下一张事件
but[1].onclick = rightsta;
//下一张事件
function rightsta() {
// 调用自动轮播事件
stats();
// 清除点击事件
// 目的是为了防止短时间内多次点击导致出现bug
but[1].onclick = "";
// 在 1 秒后再次绑定点击事件
// 因为过渡时间是 1 秒
setTimeout(function() {
but[1].onclick = rightsta;
}, 1000);
}
but[0].onclick = lefts;
// 上一张点击事件
function lefts() {
// 调用上一张轮播事件
leftstats();
// 上一张点击事件清除绑定
but[0].onclick = "";
// 1 秒后重新绑定
setTimeout(function() {
but[0].onclick = lefts;
}, 1000);
}
// 上一张轮播事件
function leftstats() {
// 当到达第一张图片时
if (k == 0) {
// 让图片到达最后一张
k = imgs.length - 1;
// 过渡时间去除，保证用户看不到
img.style.transition = "";
// 移动到对应的位置
img.style.marginLeft = `-${k*imgWidth}px`;
// 小圆点的第一个变为黑色
list[0].style.backgroundColor = "rgba(0,0,0,1)";
// 小圆点的最后一个变为红色，表示当前为最后一张
list[list.length - 1].style.backgroundColor = "rgba(255,0,0,1)";
}
// 设定一次性定时器，50毫秒后执行 k-- 也即是上一张
setTimeout(function() {
k--;
// 加上过渡时间
img.style.transition = "all 1s";
// 移动
img.style.marginLeft = '-' + k * imgWidth + "px";
if (k < list.length - 1) { // 避免出现报错
list[k + 1].style.backgroundColor = "rgba(0,0,0,1)";
list[k].style.backgroundColor = "rgba(255,0,0,1)";
}
}, 50);
}
</script>使用以上代码写出来的轮播图，在图片下方会有相对应图片变色的小圆点，可以点击上一张或下一张更换图片。
