如何使用JavaScript制作轮播图

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>

使用以上代码写出来的轮播图，在图片下方会有相对应图片变色的小圆点，可以点击上一张或下一张更换图片。