无缝轮播图效果

相信很多小伙伴刚开始写的时候对于无缝轮播图的这种效果感到很困惑，我也一样，不过在重写了n次后，终于实现了😂，拿来就能用（虽说还是有一丢丢的小bug吧，但是不碍事）。

HTMLl结构

	<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);