无缝轮播图

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			
			.warp {
				width: 520px;
				height: 280px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			
			.imgBox {
				width: 9999px;
			}
			
			.imgBox::after {
				content: "";
				display: block;
				clear: both;
			}
			
			.imgBox li {
				float: left;
				width: 520px;
				height: 280px;
			}
			
			.imgBox li img {
				width: 100%;
			}
			
			.next,
			.pre {
				position: absolute;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.2);
				color: #fff;
				font-size: 20px;
				text-align: center;
				top: 50%;
				transform: translateY(-50%);
				cursor: pointer;
			}
			
			.next:hover,
			.pre:hover {
				background: rgba(0, 0, 0, 0.3);
			}
			
			.next {
				right: 0;
			}
			
			.pre {
				left: 0;
			}
			
			.tran {
				transition: 500ms;
			}
			
			.pager {
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
			}
			
			.pager span {
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				margin: 0 3px;
				cursor: pointer;
			}
			
			.pager .active {
				background: skyblue;
			}
		</style>

		<div class="warp">
			<!--图片区-->
			<ul class="imgBox ">
				<li><img src="img/11.jpg" /></li>
				<li><img src="img/33.jpg" /></li>
				<li><img src="img/QQ图片20180809104057.jpg" /></li>

			</ul>
			<!--左右按钮-->
			<div class="next">&gt;</div>
			<div class="pre">&lt;</div>
			<!--分页器-->
			<div class="pager">
				<!--<span class="active"></span>
				<span></span>
				<span></span>-->
			</div>
		</div>

		<script type="text/javascript">
			var warp = document.querySelector(".warp"),
				imgBox = document.querySelector(".imgBox"),
				next = document.querySelector(".next"),
				pre = document.querySelector(".pre"),
				ali = imgBox.querySelectorAll("li");
			//获取图片的宽度
			var imgW = ali[0].offsetWidth;
			//图片下标值的初始值
			var index = 1;
			imgBox.style.transform = "translateX(-" + imgW * index + "px)";
			var isclick = true;
			//克隆第一张图片和最后一张，放到图片最后面和最前面
			var liclone_first = ali[0].cloneNode(true);
			var liclone_last = ali[ali.length - 1].cloneNode(true);
			imgBox.appendChild(liclone_first);
			imgBox.insertBefore(liclone_last, ali[0]);

			//右边按钮，向左移动
			next.addEventListener("click", function() {
				if(isclick) {
					index++;
					imgBox.style.transform = "translateX(-" + imgW * index + "px)";
					if(!imgBox.classList.contains("tran")) {
						imgBox.classList.add("tran");
					}
					addColr(index);
				}
				isclick = false;
			});

			//左边按钮，右边移动
			pre.addEventListener("click", function() {
				if(isclick == true) {
					index--;
					if(!imgBox.classList.contains("tran")) {
						imgBox.classList.add("tran");
					}
					imgBox.style.transform = "translateX(-" + imgW * index + "px)";
					addColr(index);
				}
				isclick = false;
			})
			//边界判断
			imgBox.addEventListener("transitionend", function() {
				//右边界
				if(index == ali.length + 1) {
					index = 1;
					imgBox.style.transform = "translateX(-" + imgW * index + "px)";
					imgBox.classList.remove("tran");
				}
				//左边界
				if(index == 0) {
					index = ali.length;
					imgBox.style.transform = "translateX(-" + imgW * index + "px)";
					imgBox.classList.remove("tran");
				}
				isclick = true;
			});
			//自动轮播
			setInterval(function() {
				if(isclick) {
					index++;
					imgBox.style.transform = "translateX(-" + imgW * index + "px)";
					if(!imgBox.classList.contains("tran")) {
						imgBox.classList.add("tran");
					}
					addColr(index);
				}
				isclick = false;
			}, 1000)
			//分页器
			var pager = document.querySelector(".pager");
			for(var i = 0; i < ali.length; i++) {
				var span = document.createElement("span");
				pager.appendChild(span);
				if(i == 0) {
					span.classList.add("active");
				}
			}
			var aSpan = pager.children;
			//aSpan[0].classList.add("active");

			for(var i = 0; i < aSpan.length; i++) {
				(function(k) {
					aSpan[k].addEventListener("click", function() {
						if(!imgBox.classList.contains("tran")) {
							imgBox.classList.add("tran");
						}
						imgBox.style.transform = "translateX(-" + imgW * (k + 1) + "px)";
						for(var j = 0; j < aSpan.length; j++) {
							aSpan[j].classList.remove("active");
						}
						aSpan[k].classList.add("active");
						index = k + 1;
					})
				})(i);
			}

			function addColr(k) {
				k = k - 1;
				if(k > aSpan.length - 1) {
					k = 0;
				} else if(k < 0) {
					k = 2;
				}
				for(var j = 0; j < aSpan.length; j++) {
					aSpan[j].classList.remove("active");
				}
				aSpan[k].classList.add("active");
			}
		</script>