无缝滚动轮播图

相信很多小伙伴刚开始写的时候对于无缝轮播图的这种效果感到很困惑，我也一样，不过在重写了n次后，我终于实现了😂（md，不容易啊）；废话不多说，直接上代码。

HTML结构如下：

		<div class="banner ">     显示轮播图的盒子
				<div class="arrow_content">   左右箭头的盒子
					<span class="arrow_toLeft"></span>
					<span class="arrow_toRight"></span>
				</div>
				<ul class="move_Item clear_float">  要移动的盒子
					<li>
						<a href="" class="block_lk">
							<img src="images/1621861700873.jpg">
						</a>
					</li>
					<li>
						<a href="" class="block_lk">
							<img src="images/1618925342654.jpg">
						</a>
					</li>
					<li>
						<a href="" class="block_lk">
							<img src="images/1621862094567.jpg">
						</a>
					</li>
					<li>
						<a href="" class="block_lk">
							<img src="images/1621861968517.jpg">
						</a>
					</li>
				</ul>
				<ol class="circe clear_float"></ol>  这是下方的小圆圈
			</div>

css结构：

	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	list-style: none;
	}
		.banner {
		  position: relative;
		  height: 650px;
		  width: 1903px;
		  overflow: hidden;
		}
		.banner .arrow_content {
		  position: absolute;
		  top: 50%;
		  width: 99%;
		  display: flex;
		  justify-content: space-between;
		  z-index: 2;
		}
		.arrow_toLeft::after {
		  content: '';
		  display: inline-block;
		  width: 5px;
		  height: 5px;
		  position: relative;
		  top: 6px;
		  left: 9px;
		  border-top: 2px solid #ebebeb;
		  border-right: 2px solid #EBEBEB;
		  transform: rotate(225deg);
		  margin: 1px 2px;
		}
		
		.arrow_toRight::after {
		  content: '';
		  position: relative;
		  top: 6px;
		  left: 9px;
		  display: inline-block;
		  width: 5px;
		  height: 5px;
		  border-top: 2px solid #ebebeb;
		  border-right: 2px solid #EBEBEB;
		  transform: rotate(45deg);
		  margin: 1px 2px;
		}
		.banner .arrow_content .arrow_toLeft,
		.banner .arrow_content .arrow_toRight {
		  display: inline-block;
		  padding: 15px;
		  cursor: pointer;
		  transition: 0.2s;
		  	background-color: white;
		  border-radius: 50%;
		}

		.banner .arrow_content .arrow_toLeft::after,
		.banner .arrow_content .arrow_toRight::after {
		  width: 20px;
		  height: 20px;
		  border-top: 2px solid #d1d1d1;
		  border-right: 2px solid #d1d1d1;
		}
		.banner .arrow_content .arrow_toLeft::after {
		  top: 2px ;
		  left: 7px ;
		}
		.banner .arrow_content .arrow_toRight::after {
		  top: 2px ;
		  left: -3px;
		}
		.banner .move_Item {
		  position: relative;
		  left: 0px;
		  width: 800%;
		}
		.banner .move_Item li {
		  float: left;
		  height: 650px;
		}
		.banner .move_Item li img {
		  width: 1903px;
		  height: 650px;
		}
		.banner .circe {
		  position: absolute;
		  bottom: 0;
		  left: 50%;
		  transform: translateX(-50%);
		}
		.banner .circe li {
		  float: left;
		  margin: 0px 5px;
		  width: 15px;
		  height: 15px;
		  border: 2px solid white;
		  border-radius: 50%;
		}
		.curent {
		  background-color: white;
		}

js代码：

let banner = document.querySelector('.banner');
		let ban_w = document.querySelector('.banner').offsetWidth; //显示主盒子的宽度
		let move_Item = document.querySelector('.banner .move_Item'); //移动盒子ul
		let first = move_Item.children[0].cloneNode(true);
		move_Item.appendChild(first);
		let num = c = 0; //num控制轮播图  c控制小圆圈
		let ol_c = document.querySelector('.banner .circe'); //小圆圈父盒子
		let arrow_pve = document.querySelector('.banner .arrow_toLeft'); //左侧箭头
		let arrow_next = document.querySelector('.banner .arrow_toRight'); //右侧箭头
		banner.addEventListener('mouseenter', () => {
			clearInterval(timer);
			timer = null;
		});
		banner.addEventListener('mouseleave', () => {
			timer = setInterval(function() {
				arrow_next.click();
			}, 2000);
		});
		for (let i = 0; i < move_Item.children.length - 1; i++) {
			let list = document.createElement('li');
			ol_c.appendChild(list);
			list.setAttribute('data_moveBg', i);
			list.addEventListener('click', function() {
				let now_list = this.getAttribute('data_moveBg');
//点击了某个li，就把这个li的索引赋值给num和c，以此解决箭头点击小圆圈的样式不会跟随的状况
				num = c = now_list;
				for (let i = 0; i < ol_c.children.length; i++) {
					ol_c.children[i].className = '';
				}
				ol_c.children[i].className = 'curent';
				move_Item.style.left = -now_list * ban_w + 'px';
			});
			ol_c.children[0].className = 'curent';
		}
		//左侧箭头
		arrow_pve.addEventListener('click', function() {
			if (num == 0) {
				num = move_Item.children.length - 1;
				move_Item.style.transition = 0 + 's';
				move_Item.style.left = -num * ban_w + 'px';
			} else {
				num--;
				move_Item.style.transition = 0.5 + 's';
				move_Item.style.left = -num * ban_w + 'px';
				c--;
				c = c < 0 ? ol_c.children.length - 1 : c;
				getMonth();
			}

		});
			//右侧箭头
			arrow_next.addEventListener('click', function() {
				if (num == move_Item.children.length - 1) {
					move_Item.style.left = 0;
					move_Item.style.transition = 0 + 's';
					num = 0;
				}else{
					num++;
						move_Item.style.transition = 0.5 + 's';
					move_Item.style.left = -num * ban_w + 'px';
					c++;
					c = c == ol_c.children.length ? c = 0 : c;
				}
				getMonth();
			});

		function getMonth() {
			for (let i = 0; i < ol_c.children.length; i++) {
				ol_c.children[i].className = '';
			}
			ol_c.children[c].className = 'curent';
		}
		let timer = setInterval(function() {
			arrow_next.click();
		}, 2000);

综上所述，便可实现无缝滚动的效果，注意：箭头事件里面的条件一定不要写错，这是我重写n次后的经验