HTML，js，css无缝轮播

无缝连接轮播

轮播图是很多项目中经常会需要的，轮播图这个东西说简单也简单，说难也难，今天我就为大家整理了轮播图当中的一种**“无缝轮播滚动”**

HTML代码：

<!-- 轮播图区域 -->
			<div class="banner">
				<!-- 装轮播里内容的盒子 -->
				<div class="bannerbox" id="bannerbox">
					<!-- 装图片的盒子宽为下面图片的七倍 -->
					<div id="ba" class="ba">
					<!--在每张图片的后面注释是为了防止换行造成的边距-->
							<img src="img/ban5.jpg"><!-- 
						 --><img src="img/ban1.jpg"><!-- 
						 --><img src="img/ban2.jpg"><!-- 
						 --><img src="img/ban3.jpg"><!-- 
						 --><img src="img/ban4.jpg"><!-- 
						 --><img src="img/ban5.jpg"><!-- 
						 --><img src="img/ban1.jpg">
						
					</div>
					<!-- 向左向右按钮 -->
					<div class="leftbtn" id="btnleft"></div>
					<div class="rightbtn" id="btnright"></div>
					<!-- 小圆点 -->
					<ul class="yd" id="yd">
						<li ></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
					<!-- 小盒子 -->
					<div class="limgbox" id="limgbox">
						<div id="d1"><img src="img/ban1.jpg" width="100px" height="20px"></div>
						<div><img src="img/ban2.jpg" width="100px" height="20px"></div>
						<div><img src="img/ban3.jpg" width="100px" height="20px"></div>
						<div><img src="img/ban4.jpg" width="100px" height="20px"></div>
						<div><img src="img/ban5.jpg" width="100px" height="20px"></div>
					</div>
				</div>
			</div>

css代码：

.bannerbox{
	height: 410px;
	overflow: hidden; 
	position: relative;
	
}
.bannerbox>#ba>img{
	transition: 2s;
} 
/* 轮播方法二 */
.ba{
	width: 13440px;
	height: 410px;
	position: relative;
	transition:  1s;
	margin-left: -1920px;
}
/* 两个按钮 */
.leftbtn{
	width: 45px;
	height: 80px;
	background: url(../img/bannerIco.png) 0px -42px;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	left: 50%;
	margin-left: -490px;
	display: none;
	cursor: pointer;
}
.rightbtn{
	width: 45px;
	height: 80px;
	background: url(../img/bannerIco.png) -80px -42px;
	position: absolute;
	top: 50%;
	margin-top: -40px;
	right: 50%;
	margin-right: -490px;
	display: none;
	cursor: pointer;
}
/* 小圆点 */
.yd{
	width: 100px;
	position: absolute;bottom: 10px;
	left: 50%;
}
.yd>li{
	display: inline-block;
	width: 10px;height: 10px;
	border: 1px solid #999;
	border-radius: 50%;
	background-color: rgb(194,202,199);
}
.yd>li:nth-child(1){
	background-color: rgb(134,151,145);
}
/* 轮播图缩略图 */
.limgbox{
	position: absolute;
	width: 580px;
	height: 70px;
	background-color: rgba(0,0,0,.6);
	bottom: 0px;
	left: 50%;
	margin-left: -290px;
	display: flex;
	box-sizing: border-box;
	justify-content: space-around;
	align-items: center;
	display: none;
	
}
.limgbox>div{
	display: inline-block;
	width: 102px;
	height: 45px;
	cursor: pointer;
	text-align: center;
	line-height: 45px;
	border: 1px solid transparent;
}
.limgbox>div>img{
	vertical-align: middle;
}
.limgbox>div:hover{
	border: 1px solid #fff;
}
/* 鼠标移入轮播 */
.bannerbox:hover>.leftbtn{
	display: block;
}
.bannerbox:hover>.rightbtn{
	display: block;
}
.bannerbox:hover>.limgbox{
	display: flex;
}

JS代码：

// 轮播图方法2
	var index=0;
	var btnleft=document.getElementById("btnleft");
	var btnright=document.getElementById("btnright");
	// 获取所有的图片
	var banbox=document.getElementById("ba");
	var imgs=banbox.getElementsByTagName("img");
	//获取原点
	var yd=document.getElementById("yd");
	let yds=yd.getElementsByTagName("li");
	//获取小图片
	var smbox=document.getElementById("limgbox");
	var limgs=smbox.getElementsByTagName("div");
	
	let jl=2;
	// 点击左边按钮
	btnleft.onclick=function(){
		lb();
	}
	btnright.onclick=function(){
		rlb();
		
	}
	var timer;
	// 开启轮播
	zdlunbo();
	//自动轮播
	function zdlunbo(){
		timer=setInterval(function(){
			lb();
		},2000)
	}
	
	// 左轮播
	function lb(){
		// 先把所有原点和小图片的样式清除
		for (var i = 0; i < yds.length; i++) {
			yds[i].style.background="rgb(194,202,199)";
			limgs[i].style.borderColor="transparent";
		}
		// 修改图片的左外边距
		banbox.style.marginLeft=-jl*1920+"px";
		// 如果这是最后一张图就执行下面的代码
		if(jl>=6){
			//先将过渡时间变为0，再将整个box回到初始位置
			//无缝轮播核心
			banbox.style.transition="0s";
			banbox.style.marginLeft="0px";
			// 通过延时将图片向左移动一张，给人一种错觉就相当于重新来一圈
			setTimeout(function(){
				banbox.style.transition="margin-left 1s";
				banbox.style.marginLeft="-1920px";
				},10)
			// 再将下标回到第三张
			jl=2;
		}
		else{
			//否则图片正常轮播
			jl++;
			banbox.style.transition="margin-left 1s"
		}
		// 最后将原点样式设置
		yds[jl-2].style.background="rgb(134,151,145)";
		limgs[jl-2].style.borderColor="#fff";
	}
	// 右轮播
	function rlb(){
		for (var i = 0; i < yds.length; i++) {
			yds[i].style.background="rgb(194,202,199)";
			limgs[i].style.borderColor="transparent";
		}
		banbox.style.marginLeft=-(jl-2)*1920+"px";
		if(jl<=2){
			//先将过渡时间变为0，再将整个box回到初始位置
			banbox.style.transition="0s";
			banbox.style.marginLeft="-11520px";
			jl=6;
			setTimeout(function(){
				banbox.style.transition="margin-left 1s"
				banbox.style.marginLeft="-9600px"
				},10)
		}
		else{
			jl--;
			banbox.style.transition="margin-left 1s"
		}
	
		// 原点样式
		yds[jl-2].style.background="rgb(134,151,145)";
		limgs[jl-2].style.borderColor="#fff";
		
	}
	
	var bo=document.getElementById("bannerbox");
	// 鼠标移入停止
	bo.onmouseover=function(){
		clearInterval(timer);
	}
	// 鼠标移出继续轮播
	bo.onmouseout=function(){
		clearInterval(timer);
		zdlunbo();
	}
	// 鼠标移入小盒子里的图片
	for (let m = 0; m < limgs.length; m++) {
		limgs[m].onmouseenter=function(){
			//因为前面多放了一张图片，所以m得加一
			jl=m+1;
			lb();
		}
	}