小米高级轮播图(定时器、切换按钮、鼠标移入移出事件)-CSDN博客

本文链接：https://blog.csdn.net/2301_79753267/article/details/147349675

HTML部分

<div class="banner">
	<div>
			<img src="img/a1.webp" class="active">
			<img src="img/a2.webp">
			<img src="img/a3.webp">
			<img src="img/a4.webp">
			<img src="img/a5.webp">

	</div>
	<div class="icon">
			<span class="select">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
	</div>
	<div class="left"><</div>
	<div class="right">></div>
</div>

CSS部分

<style type="text/css">
	//通配符选择器	
        *{
			margin: 0;
			padding: 0;
		}
    //整体div宽高居中 设置定位
		.banner{
			width: 1200px;
			height: 400px;
			margin: 0 auto;
			position: relative;
		}
    //图片宽度适应banner 设置隐藏
		.banner img{
			width: 100%;
			display: none;
		}
    //设置图片显示类名active
		.banner .active{
			display: block;
		}
    //整体下面的切换小图标12345 设置绝对定位 设置居中
		.icon{
			position: absolute;
			bottom: 5px;
			left:50%;
			transform: translateX(-50%);
		}
    //数字小图标的样式 没有被选中的时候黑底白字
		.icon span{
			width: 20px;
			height: 20px;
			display: inline-block;
			background: rgba(0, 0, 0, 0.5);
			color: white;
			text-align: center;
			line-height: 20px;
			font-size: 12px;
		}
    //选中某一张图片的时候 图标的样式是白底黑字
		.icon .select{
			background: #fff;
			color: black;
		}
    //左右小箭头 设置绝对定位
		.left,.right{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 40px;
			height: 80px;
			line-height: 80px;
			text-align: center;
			background: rgba(0, 0, 0, 0.5);
			color: white;
		}
        //左边
		.left{
			left: 0;
		}
        //右边
		.right{
			right: 0;
		}
       //鼠标悬停的时候变小手   
		.left:hover{
			cursor: pointer;
		}
		.right:hover{
			cursor: pointer;
		}
	</style>

css的每一个样式都已在上面标注好

JS部分

<script type="text/javascript">
		//获取图片imgs和下面的小下标spans
		let imgs= document.querySelectorAll(".banner img")
		let spans = document.querySelectorAll(".icon span")
		//1.遍历span(下标数字标签) 添加点击事件
		for(let i = 0;i < spans.length;i++){
			spans[i].onclick = function(){
				//active是display：block 图片的类名 先移除已有类名的img 再给点击到的图片添加此类名
				document.querySelector(".active").className=""
				//select是背景颜色和字体颜色变化  是span标签的 同样也是先移除再添加
				document.querySelector(".select").className=""
				this.className="select"
				imgs[i].className = "active"
			}
		}
		//3.获取右侧标签 添加点击事件
		let right = document.querySelector(".right")
		right.onclick = function(){
			let select = document.querySelector(".select")
			if(select.nextElementSibling== null){
				spans[0].onclick()
		}else{
			//当点击右侧按钮时，相当于点击当前span的下一个兄弟元素
			select.nextElementSibling.onclick()
		}}

		let left = document.querySelector(".left")
		left.onclick = function(){
			let select = document.querySelector(".select")
			if(select.previousElementSibling == null){
				spans[4].onclick()
		}else{
			select.previousElementSibling.onclick()
		}}

		//5.先获取整体 设置一个空变量
		let banner = document.querySelector(".banner")
		let time = null	

		banner.onmouseleave = function(){
			time = setInterval(function(){
			right.onclick()
			
			},1000)
		}
		banner.onmouseleave()
		banner.onmouseenter = function(){
			clearInterval(time)
		}
	</script>

js部分总共分成三大块：数字图标点击事件、左右切换点击事件、鼠标移入移出自动播放事件(定时器)

先看第一个模块数字图标点击事件，在这要注意一个问题！图片数量和span标签的数量是一致的，（刚开始我的逻辑错误点：因为有图片标签还有span标签都要遍历，所以我嵌套了双层for循环，忽略了两种标签的数量一致！！！）获取完标签后直接for循环遍历即可，然后给span标签添加点击事件
spans的点击事件还是原来的套路移除已有类名标签的类名，再给现在点击的标签添加类名，注意这里由于图片和下标都要变化，所以先移除active类名和select类名，再添加上（this表示现在点击的span标签）对应的类名
左右按钮的点击事件结构方法是完全相同的，不过要注意的一点是我们左右切换的时候，假设如果到最后一张图片了，这时候我们应该回到第一张图片上，那这时就要用到if语句来判断下一个是否为空了(这里用到的是下一个兄弟nextElementSibling，上一个兄弟是previousElementSibling)
来整理一下左右切换的整体逻辑（举例：右侧按钮）先获取现在数字小图标的位置，然后if语句进行判断如果下一个为空就调用第一个标签的点击事件，否则就调用下一个兄弟的点击事件左右相同
最后一步给整体加上定时器获取banner(整体div类名)，设一个空变量一会放定时器，在这里要注意的是鼠标移出就自动播放事件其实就是右击事件，直接在定时器里调用右击函数即可，鼠标移出就停止播放事件就是清除定时器，轮播图就完成了！