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

效果展示：

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

按钮和图片均使用绝对定位进行布局，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:

 
		<div class="son">
			<!--左按钮-->
			<div class="left" onclick="pre()">
				<div></div>
			</div>
			<!--图片-->
			<img class="active" src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/2bf1b169-d217-44c3-a5b3-dd00813bc20d?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=23330623af515773e0bf2e01fa5b3cc8" alt="" />
			<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/ac5b9977-78f3-4454-bc17-1f0c054d1e9c?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=0da0b741462bac5a6ce97235dcf16acc" alt="" />
			<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/ce0cca1b-6473-456a-8f60-a772fa8881af?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749043&t=cd9f56b59bcd749726ff75bb14a66cc4" alt="" />
			<img src="https://gimg2.baidu.com/image_search/src=http://safe-img.xhscdn.com/bw1/d5d1426d-502b-4a6e-a7dd-92e406fc3ab1?imageView2/2/w/1080/format/jpg&refer=http://safe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705749044&t=12e5455d6508c0b5a7dc6a1ee233c601" alt="" />
			<!--右按钮-->
			<div class="right" onclick="next()">
				<div></div>
			</div>
			<!--底部点-->
			<div class="dian">
				<ul>
					<li class="liactive"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>复制

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 < dian.length; i++) {
		img[i].dataset.index = i
		dian[i].dataset.index = i
		//		给点设置点击效果
		dian[i].onclick = isclick
	}
	// 点击图片点切换
	function isclick() {
		//		获取当前的下标
		index = this.dataset.index
		//		清除添加的样式
		for(var i = 0; i < img.length; i++) {
			img[i].classList = ''
			dian[i].classList = ''
		}
		//		添加样式
		this.classList = 'liactive'
		img[index].classList = 'active'
	}
	//上一张图片
	function pre() {
		if(index <= 0) {
			index = 3
		} else {
			index--
		}
		qiehuan()
	}
	//下一张图片
	function next() {
		if(index >= 3) {
			index = 0
		} else {
			index++
		}
		qiehuan()
	}
	// 点击切换图片
	function qiehuan() {
		for(var i = 0; i < img.length; i++) {
			img[i].classList = ''
			dian[i].classList = ''
		}
		dian[index].classList = 'liactive'
		img[index].classList = 'active'
	}
	//	设置自动轮播
	var T = setInterval(next, 1500)
	//	当鼠标移入图片移除轮播效果
	son.onmouseover = function() {
		clearInterval(T)
	}
	//当鼠标移入图片添加移除效果
	son.onmouseout = function() {
		T = setInterval(next, 1500)
	}复制