无缝轮播

无缝轮播图
无缝轮播思想：无缝就是让每两张图片都有一个无缝轮播的效果，1和2、2和3、3和4、4和5、5和1.难实现的是最后一张和第一张的无缝轮播效果，是个效果实现的方法就是克隆第一张图片放在最后面（我们把克隆这张叫做6），在轮播到第6张图示，让图瞬间回到第一张，‘oUl.style.left = 0 + ‘px’;’就是用这句来实现，这样看不出来瞬间的过程，这样就实现了无缝轮播了，话不多说代码奉上（对了，这里的html，css，还有封装的函数就是我发布的上一篇透明轮播里面的，哈哈不用谢）：

/*js文档*/
<script type="text/javascript">
			//先克隆第一张图片添加最后面

			var rightBtn = document.querySelector('.rightBtn');
			var oUl = document.querySelector('.item');
			//console.log(oUl);
			var oLis = document.querySelectorAll('.item li')

			var cloneFirst = document.createElement('li');
			var img = document.createElement('img');
			img.src = oLis[0].firstElementChild.src;
			cloneFirst.appendChild(img);
			oUl.appendChild(cloneFirst);

			var pageNum = 0;
			showPoint(pageNum);
			//右点击
			rightBtn.onclick = function() {
				pageNum++

				if(pageNum == 6) {
					oUl.style.left = 0 + 'px';
					pageNum = 1;
				}	
				animate(oUl, {
					left: -pageNum * 590
				});
				
				if (pageNum == 5) {
					showPoint(0);
				}else{
					showPoint(pageNum);
				}
			}

			//左点击
			var leftBtn = document.querySelector('.leftBtn');
			leftBtn.onclick = function() {
				pageNum--;
				if(pageNum == -1) {
					oUl.style.left = -5 * 590 + 'px';
					pageNum = 4;
				}
				showPoint(pageNum);
				animate(oUl, {
					left: -pageNum * 590
				});
				if (pageNum == -1) {
					showPoint(4);
				}else{
					showPoint(pageNum);
				}
			}

			//自动播放
			var timer = setInterval(function() {
				rightBtn.onclick();
			}, 1000);

			var box = document.querySelector('.box');

			box.onmouseenter = function() {
				clearInterval(timer);
			}
			box.onmouseleave = function() {
				timer = setInterval(function() {
					rightBtn.onclick();
				}, 1000);
			}

			//小圆点跟着图片切换走
			function showPoint(pageNum){
				var oPage = document.querySelector('.page')
				var oPages = oPage.querySelectorAll('li');
				//console.log(oPages[1]);
				for (let i = 0; i < oPages.length; i++) {
					
					oPages[i].style.background = 'red'
					
				}
				oPages[pageNum].style.background = 'white';
			}
			
			showPoint(0);
			
			
			//点击小圆点切换图片
			var lis = document.querySelectorAll('.page li')
			for (let i = 0; i < lis.length; i++) {
				lis[i].onclick = function(){
					console.log(this);
					showPoint(i);
					animate(oUl,{left:-i*590})
					pageNum = i;
					
				}
			}
			
			
		</script>