暑期学习日记31：js实现轮播图

土肥圆波太郎

已于 2022-08-23 22:56:54 修改

阅读量290

点赞数

文章标签： JavaScript 轮播图图片切换事件监听 DOM操作

于 2022-08-20 20:54:56 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126444302

版权

本次学习了使用js实现轮播图效果，逻辑为：

（1）通过函数autochange()将横向排列的图片列表定时左移，来达到自动轮播的效果。

（2）通过imggo(n)函数通过改变marginleft样式移动到-（n*800）个px，即移动到第n张图片。

（3）icogo(m)函数将圆点的背景颜色样式删除，然后将序号为m的圆点背景颜色变为红色。

（4）点击“《”（last）和“》”（next）两个元素调用imggo()函数切换到上一张图片或者下一张图片。

（5）点击圆点会调用imggo()和icogo()两个函数,切换图片并改变圆点列表的样式。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			text-decoration: none;
			list-style: none;
		}
		#kuangjia{
			width: 800px;
			height: 600px;
			border: 2px solid black;
			overflow: hidden;
			position: relative;
		}
		#imgs{
			width: 4000px;
			height: 600px;
		}
		img{
			width: 800px;
			height: 600px;
		}
		li{
			float: left; //li元素左浮动使图片横向排列。
		}
		#last{
			background-color:grey;
			width: 30px;
			height: 40px;
			color: white;
			text-align: center;
			line-height: 40px;
			position: absolute;
			left: 5px;
			top: 45%;
			cursor: pointer;
		}
		#next{
			background-color:grey;
			width: 30px;
			height: 40px;
			color: white;
			text-align: center;
			line-height: 40px;
			position: absolute;
			right: 5px;
			top: 45%;
			cursor: pointer;
		}
		#icos{
			position: absolute;
			right: 10px;
			bottom: 10px;
		}
		#icos li{
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: gray;
			text-align: center;
			line-height: 30px;
			color: white;
			margin-left: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="kuangjia">
		<ul id="imgs">
		<li><img src="./hua1.jpg" alt=""></li>
		<li><img src="./hua2.jpg" alt=""></li>
		<li><img src="./hua3.jpg" alt=""></li>
		<li><img src="./hua4.jpg" alt=""></li>
			<li><img src="./hua1.jpg" alt=""></li>
		</ul>
		<div id="last">《</div>
		<div id="next">》</div>	
		<ul id="icos">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>

	<script>
		var left=0;
		var timer;
		var elast=document.querySelector('#last');
		var enext=document.querySelector('#next');
		var eico_li=document.getElementById('icos').getElementsByTagName('li');//获取圆点列表的4个li元素。
		var eico=document.querySelector('#icos');
		autochange();
		//通过函数autochange将横向排列的图片列表定时左移，来达到自动轮播的效果。
		function autochange(){
			if(left<=-3200){
				left=0;
			}
			var imgnumber=Math.floor(-left/800);//获取当前图片的次序并赋值给imgnumber
			imgs.style.marginLeft=left + 'px';//每次运行autochange函数,通过改变marginleft样式移动到left个px，其中left每次积累-10。
			var n =(left%800==0)?n=1200:n=10;//添加变量n,每n毫秒运行一次autochange函数，当left%800==0，即滚完一张图时，停留1200毫秒。
			left-=10;
			icogo(imgnumber);//调用icogo函数，将序号为imgnumber的圆点背景颜色变为红色。
			timer=setTimeout(autochange,n);
		}
		//imggo函数通过改变marginleft样式移动到-（n*800）个px，n为整数，即移动到第n张图片。
		function imggo(n){
			let ichange=-(n*800);
			imgs.style.marginLeft=ichange+'px';
			left=ichange;
		}
		//设置单击事件，通过将(left/800)向下取整获取当前图片的次序，减去1则为上一张图片，再调用imggo()函数移动到上一张图片。
		elast.onclick=function(){
			let lastgo=Math.floor(-left/800)-1 
			if(lastgo==-1){
				lastgo=3;
			}
			imggo(lastgo);
		}
		//设置单击事件，通过将(left/800)向下取整获取当前图片的次序，加上1则为下一张图片，再调用imggo()函数移动到下一张图片。
		enext.onclick=function(){
			let nextgo=Math.floor(-left/800)+1
			if(nextgo==4){
				nextgo=0;
			}
			imggo(nextgo);
		}
		//icogo函数将圆点的背景颜色样式删除，然后将序号为m的圆点背景颜色变为红色。
		function icogo(m){
			for(let index=0;index<eico_li.length;index++){
				eico_li[index].style.backgroundColor='';
			}
			if(m<eico_li.length){
				eico_li[m].style.backgroundColor='red';
			}
		}
		//设置单击事件，用tg获取目标事件元素，用iconumber获取其序号，然后调用imggo和icogo函数改变样式完成效果。
		eico.onclick=function(){
			var tg=event.target;
			let iconumber=tg.innerHTML-1;
			imggo(iconumber);
			icogo(iconumber);
		}
	</script>
</body>
</html>

效果显示如下图：