原生-无缝轮播

1、公共样式

	var Utils=(function () {
		return {
			//SSS预加载
			loadImg:function (srcList,callBack) {
				var img=new Image();
				img.num=0;
				img.imgList=[];
				img.srcList=srcList;
				img.callBack=callBack;
				img.addEventListener("load",this.loadHandler);
				img.src="./img/"+srcList[img.num];
			},
			loadHandler:function (e) {
				this.imgList.push(this.cloneNode(false));
				this.num++;
				if(this.num>=this.srcList.length){
					this.callBack(this.imgList);
					return;
				}
				//事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
				this.src="./img/"+this.srcList[this.num] ;
			},
			
			//样式复制
			ce:function(type , style){
				var elem = document.createElement(type) ;
				if(style) Object.assign(elem.style , style) ;
				return elem ;
			} ,
		}
	})();

2、准备工作-定义

var bnList ,	//按钮
	imgList ,	//图片
	imgCon ,	//图片容器
	ul ,		//小圆点容器
	pre ;		//颜色切换

var position = 0 ,	//下标
	direction = "left" ,	//方向
	speed = 25 ,	//切换速度
	time = 180 ,	//防抖
	playBoolean = false ,
	autoBoolean = false ;
			
const WIDTH = 1200 ,
	HEIGHT = 400 ;

3、代码实现

init() ;
function init(){
	Utils.loadImg(["lb/left.png" , "lb/right.png" , "lb/a.jpeg" ,"lb/b.jpeg" ,"lb/c.jpeg" ,"lb/d.jpeg" ,"lb/e.jpeg"] , createCarousel) ;
}
function createCarousel(list){
	bnList = list.splice(0,2) ;
	imgList = list ;
	imgList.forEach(function(item , index){
		item.style.width = WIDTH + "px" ;
		item.style.height = HEIGHT + "px" ;
	})
	var carousel = Utils.ce("div" , {	//div大容器
		width: WIDTH + "px" ,
		height: HEIGHT + "px" ,
		position: "relative" ,
		margin: "auto" ,
		overflow: "hidden"
	})
	creatImgCon(carousel) ;	//执行图片容器函数
	createBn(carousel) ;	//执行小箭头函数
	createDot(carousel) ;	//执行小圆点函数
	document.body.appendChild(carousel) 
	setInterval(animation , 16) ;
	carousel.addEventListener("mouseenter" , mouseHandler) ;
	carousel.addEventListener("mouseleave" , mouseHandler) ;
	ul.style.left = (WIDTH - ul.offsetWidth) / 2 + "px" ;
	changeDot() ;
}

function creatImgCon(parent){	//图片容器函数
	imgCon = Utils.ce("div" , {
		width: WIDTH + "px" ,
		height: HEIGHT + "px" ,
		position: "absolute" ,
		left: "0px"
	})
	imgCon.appendChild(imgList[position]) ;
	parent.appendChild(imgCon) ;
}

function createBn(parent){	//小箭头容器函数
	bnList.forEach(function(item , index){
		Object.assign(item.style , {
			position: "absolute" ,
			top: (HEIGHT - item.height) / 2 + "px" ,
			left: index === 0 ? "10px" : "none" ,
			right: index === 1 ? "10px" : "none"
		})
		item.addEventListener("click" , bnClickHandler) ;
		parent.appendChild(item) ;
	})
}

function createDot(parent){	//小圆点容器函数
	ul = Utils.ce("ul" , {
		listStyle: "none" ,
		margin: "0px" ,
		padding: "0px" ,
		position: "absolute" ,
		bottom: "20px"
	})
	imgList.forEach(function(item , index){
		var li = Utils.ce("li" , {
			float: "left" ,
			width: "18px" ,
			height: "18px" ,
			border: "1px solid rgba(255,0,0,0.8)" ,
			borderRadius: "9px" ,
			marginLeft: index === 0 ? 0 : "10px"
		})
		ul.appendChild(li) ;
	})
	parent.appendChild(ul) ;
	ul.addEventListener("click" , dotCilckHandler) ;
}

function bnClickHandler(e){	//小箭头点击函数
	if(playBoolean) return ;
	if(bnList.indexOf(this) === 0){	
		//判断条件 被点击的元素是左边按钮进入
		position-- ;
		direction = "right" ;
		if(position < 0) position = imgList.length - 1 ;

	}else{
		position++ ;
		direction = "left" ;
		if(position > imgList.length - 1) position = 0 ;
	}
	createNextImg() ;
	changeDot() ;
}

function dotCilckHandler(e){	//小圆点点击函数
	if(playBoolean) return ;
	if(e.target.nodeName !== "LI") return ;
	var arr = Array.from(this.children) ;
	var index = arr.indexOf(e.target) ;
	if(index > position) direction = "left" ;
	if(index < position) direction = "right" ;
	position = index ;
	createNextImg() ;
	changeDot() ;
}

function createNextImg(){	//图片切换函数
	imgCon.style.width = WIDTH * 2 + "px" ;
	if(direction === "left"){
		imgCon.appendChild(imgList[position]) ;
	}else if(direction === "right"){
		imgCon.insertBefore(imgList[position] , imgCon.firstElementChild) ;
		imgCon.style.left = - WIDTH + "px" ;
	}
	playBoolean = true ;
}

function animation(){
	imgPlay() ;
	autoPlay() ;
}

function imgPlay(){		//手动切换
	if(!playBoolean) return ;
	if(direction === "left"){
		imgCon.style.left = imgCon.offsetLeft - speed + "px" ;
		if(imgCon.offsetLeft <= -WIDTH){
			playBoolean = false ;
			imgCon.firstElementChild.remove() ;
			imgCon.style.left = "0px" ;
			imgCon.style.width = WIDTH + "px" ;
		}
	}else if(direction === "right"){
		imgCon.style.left = imgCon.offsetLeft + speed + "px" ;
		if(imgCon.offsetLeft >= 0){
			playBoolean = false ;
			imgCon.lastElementChild.remove() ;
			imgCon.style.width = WIDTH + "px" ;
		}
	}
}

function autoPlay(){	//自动切换
	if(!autoBoolean) return ;
	time-- ;
	if(time > 0) return ;
		var evt = new Event("click") ;
		bnList[1].dispatchEvent(evt) ;
	time = 180 ;
}

function mouseHandler(e){	//自动播放鼠标移入移出事件
	if(e.type === "mouseenter"){
		autoBoolean = false ;
		time = 180 ;
	}else if(e.type === "mouseleave"){
		autoBoolean = true ;
	}
}

function changeDot(){	//颜色切换
	if(pre) pre.style.backgroundColor = "rgba(255,0,0,0)" ;
	pre = ul.children[position] ;
	pre.style.backgroundColor = "rgba(255,0,0,0.5)" ;
}