【新思路】原生js实现banner无缝切换只需要两个标签_移动端banner和标签同时切换-CSDN博客

本文链接：https://blog.csdn.net/Cml_l/article/details/111246189

只需要两个标签实现任意数量的banner图切换

1.分析现有的banner切换方式

2.摸索一套无缝切换

3.总结

首先我们来看看现有大部分banner图的切换方式，

将已有的标签容器设置固定高、宽，超出的部分hide，

把banner图排成无缝的排（用flex布局就可以嗷嗷，没经验的可以看我之前的flex布局小程序）

再把所有排成一排的banner放到一个不设宽、高的容器中。js设置定时器变化这个容器的位置就可以实现。

2.1，分析了现有的模式后，我们先跟着套一下娃，这里就不上源码了。

但是这样的切换前端代码会显得多，不便于维护，而且切换时会有可能出现穿帮bug，

我们可以在前端只写两个标签，

使用js数组来进行动态添加，

这样不管有多少的banner图，都只需要写两个标签，

只需要管理js的数组即可，

需要修改显示顺序什么的也只需用调整数组即可。

我们先来看一下总体的效果吧。

2.2，我们来聊一下实现。

两个标签排成排，利用js来同时调整两个标签的位置

调整完成后，移出已经出框的标签

移出第一个后，在现有的后面添加一个（因为切换设置了过渡的时间，所以这里需要用延时定时器来删除和添加）

再将数组里面的值或对象添加到新增标签的属性中（这里i++就可以）

这样循环定时器第二次执行时就会得到新的标签元素，但没有增加，还是两个。

到这里我们还需要做一个光标移动上去时停留的功能。

这里我用到了清除定时器和创建定时器。

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自己先写一个</title>
		<!-- <link rel="stylesheet" type="text/css" href="css/01.css"/> -->
		<!-- 方法一，不是无缝衔接的
		<script src="js/01.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/04.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/02.css"/>
	</head>
	<body>
		<!-- 先写一个父级容器来hide多余的部分 -->
		<div id="" class="container">
			<div id="move">
			<a href="###" class="a1"><img src=""  width="600px"/></a>
			<a href="###" class="a2"><img src=""  width="600px"></a>
			</div>
		</div>
	</body>
</html>

css

.container{
		width: 600px;
		height: 230px;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		left: 600px;
	}
#move{
		position: relative;
		left: 0px;
		border: 0px solid red;
		background-color: #000080;
		display: block;
		display: flex;
		align-items: center;
		transition: all 0.6s;
}
a{
	transition: all 0.6s;
}
.a1{
	position: absolute;
	left: 0px;
	top: 0;
}
.a2{
	position: absolute;
	left: 600px;
	top: 0;
}

JavaScript

// 用两个节点
// 完事后删除第一个节点
// 并追加一个节点
window.onload=function (){
	var timer=null;
	var arr=[
		"https://hbimg.huabanimg.com/69923ffda79e37a5db7f5251c51646ab21937aba9b3c8-jBibIK_fw658/format/webp",
		"https://hbimg.huabanimg.com/1dea14f0814dd3f51cf771ecd400a920621809c6b5096-v2zkkt_fw658/format/webp",
		"https://hbimg.huabanimg.com/21f3c47b1a357aa726ac91e76187b2b271d53988838b3-0cpUar_fw658/format/webp",
		"https://hbimg.huabanimg.com/584e2580b21993d1b001940f1021879376cae8c72f1f6-4c9ygf_fw658/format/webp",
	];	
	var i=0;
	var mya=document.getElementsByTagName("a");
	mya[0].getElementsByTagName("img")[0].src=arr[i];
	i++;
	mya[1].getElementsByTagName("img")[0].src=arr[i];
	function banner(){
		mya[0].getElementsByTagName("img")[0].src=arr[i];
		 //i++放到外面，不放在这个[]方括号，不然会先赋URL在加，就会有漏洞
		 i++;
		 //判断放到前面，否则就会加到4
		 if(i>=arr.length){
		 	i=0;
		 }
		 mya[1].getElementsByTagName("img")[0].src=arr[i];
		mya[0].style.left=mya[0].offsetLeft-600+"px";
		mya[1].style.left=mya[1].offsetLeft-600+"px";		
		console.log(i);
		
		setTimeout(()=>{
			//移除第一个
			mya[0].remove();
			//现在第二个变成了第一个，要在它的后面添加一个，记住因为第一个删除了，原来的第二个变成了第一个，所以在mya[0]后面添加
			//创建一个标签
			var myca=document.createElement('a');
			var mycimg=document.createElement('img');
			  myca.className="a2";
			  myca.href="###";
			  myca.appendChild(mycimg);
			  //d.appendChild(p);
			  //第一个是父节点，括号里是添加的节点
			  move.appendChild(myca);
			  
		},600);
	}
	timer=setInterval(()=>{			
		 banner();
	},2000);
	//}
	//做一个鼠标移入时暂停
	move.onmouseover=function (){
		clearInterval(timer);
		console.log("清除定时器");
	}
	move.onmouseleave=function (){
		timer=setInterval(()=>{
			 banner();
		},2000);
		console.log("开启定时器");
	}
}

3.1总结一下

这个其实还不完善，但有助于我们理解和练习，

大家有时间可以自行完善一下前后按钮和任意按钮，

利用数组长度循环一个任意按钮，利用i值查看当前位置，

应该还挺简单的，有时间的可以练习练习。

实战中还是用包比较好，希望可以帮到大家！