自动轮播图片点击按钮及底部按钮切换图片

效果展示：

要实现一个点击按钮和底部按钮实现图片的轮播及自动轮播效果，我的思路是这样的：

按钮和图片均使用绝对定位进行布局，img 全部堆叠在 div 中心并设置为透明，通过单独设置样式让其不透明来达到 img 切换效果，给每个 img 和对应的点设置 index 来进行绑定，设置定时器对 index 值进行修改来达到自动轮播。

CSS:

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 定义显示框大小，设置相对定位 */
.son{
	margin:0 auto ;
	width: 400px;
	height: 400px;
	position: relative;
}
/* 左右切换按钮设置样式 */
.son .left,.son .right{
	opacity: 0;
	transition: 500ms;
	width: 40px;
	height: 80px;
	background-color: black;
	/* opacity: 0.3; */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.son:hover .left,.son:hover .right{opacity: 0.3;}
/* 左按钮设置位置 */
.son .left{left: 0;}
/* 右按钮设置位置 */
.son .right{right: 0;}

/* 左右按钮样式设置 */
.son .left div, .right div{
	width: 30px;
	height: 30px;
	transform: rotate(45deg);
	border-left: 3px solid white;
	border-bottom: 3px solid white;
}
/* 右按钮样式设置 */
.son .right div{transform: rotate(-135deg);
}
/* 图片设置 */
.son img{
	z-index: 1;
	width: 400px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%,-50%);
	transition: 500ms;
}
/* 设置选中样式 */
.son .active{opacity: 1;}
/* 下面四个点的位置设置 */
.dian{
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.dian ul{
	width: 100px;
	display: flex;
	justify-content: space-around;	
}
/* 四个点的样式设置 */
.dian li{
	transition: 500ms;
	border-radius:100% ;
	width: 15px;
	height: 15px;
	background-color: black;
	border: 1px solid white;
	opacity: 0.5;
}
/* 点的选中样式 */
.dian .liactive{background-color: aqua;}

HTML:

JavaScript:

// 绑定图片和点
	var img = document.querySelector(".son").getElementsByTagName("img")
	var dian = document.querySelector(".dian").getElementsByTagName("li")
	//	设置一个下标
	let index = 0;
	// 绑定 img 和 dian 的父类
	var son = document.querySelector(".son")
	// 绑定左右按钮
	var left = document.querySelector('.left')
	var right = document.querySelector('.right')
	//	给图片和点设置下标及点击效果
	for(var i = 0; i = 3) {index = 0} else {index++}
		qiehuan()}
	// 点击切换图片
	function qiehuan() {for(var i = 0; i