仿制element-ui的轮播头图原生实现，使用了部分es6语法，包含promise

今天花了点时间实现了原生的轮播头图。比较简单，就不详细讲解了，相信聪明的你一定可以理解我的代码。

这是github的地址：https://github.com/zhongjunyao/carousel

展示一下效果图：

HTMl代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原生JS编写的Carousel轮播头图,使用了es6的部分语法</title>
</head>

<body>
	<div class='carousel'>
		<div class='imgWrap'>
			<img src='./images/banner_05.jpg'>
			<img src='./images/banner_00.jpg'>
			<img src='./images/banner_01.jpg'>
			<img src='./images/banner_02.jpg'>
			<img src='./images/banner_03.jpg'>
			<img src='./images/banner_04.jpg'>
			<img src='./images/banner_05.jpg'>
		</div>
		<div class='wardWrap'>
			<img src='./images/forward.png'>
			<img src='./images/backward.png'>
		</div>
		<ul class='cursors f-cb'>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
			<li><i></i></li>
		</ul>
	</div>
</body>
</html>

CSS代码：

<style>
.carousel{
	position:relative;
	width:1224px;
	margin: 50px auto;
	overflow:hidden;
	--img-width:-1224px;
}
.imgWrap{
	/* 这里的图片容器我给了一个足够大的宽度 */
	width:9999px;
	height:500px;
	/* 为了消除图片之间的间距，使用font-size:0; */
	font-size: 0;
	transform:translateX(var(--img-width));
	transition:all .6s ease-in;
}
.imgWrap>img{
	width:1224px;
	height:500px;
}
.wardWrap{
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	display:flex;
	justify-content: space-between;
	width:100%;
	padding: 0 50px;
	box-sizing: border-box;
}
.wardWrap>img{
	/*display:none;*/
	width:100px;
	height:100px;
	opacity:0;
	transition: opacity .1s linear;
}
.wardWrap>img:hover{
	opacity: 1;
}
.z-show>img{
	/*display:block;*/
	opacity:.48;
}
.cursors{
	position:absolute;
	bottom:20px;
	left:50%;
	transform: translateX(-50%);
	padding: 0;margin:0;
	list-style: none;
}
.cursors>li{
	/*width:100px;height:10px;*/
	display:inline-block;
	padding:12px 4px;
	font-size: 0;
	cursor: pointer;
}
.cursors i{
	display:inline-block;
	width:80px;height: 4px;
	background-color: #fff;
	opacity: .48;
	transition: opacity .3s;
}
/* 状态：改变cursor透明度 */
.z-active i{
	opacity: 1;
}
/* 功能：浮动及其浮动清除 */
.f-cb{float:left;}
.f-cb:after{display:block;clear:both;overflow:hidden;content:'';}
</style>

JS代码：

<script>
!function(){
let addEvent = document.addEventListener ?
	(elem,type,listener,useCapture)=>{
		elem.addEventListener(type,listener,useCapture);
	} : 
	(elem,type,listener,useCapture)=>{
		elem.attachEvent('on'+type,listener);
	};
let delEvent = document.removeEventListener ?
	(elem,type,listener,useCapture)=>{
		elem.removeEventListener(type,listener,useCapture);
	} : 
	(elem,type,listener,useCapture)=>{
		elem.detachEvent('on'+type,listener);
	};

let $ = selector=>{
	return [].slice.call(document.querySelectorAll(selector));
}
let addClass = (node,className)=>{
	let current = node.className||'';
	if((' '+current+' ').indexOf(' '+className+' ')===-1){
		node.className = current?(current+' '+className):className;
	}
}
let delClass = (node,className)=>{
	let current = node.className||'';
	node.className = (' '+current+' ').replace(' '+className+' ',' ').trim();
}

let prev = 5,
		current = 0,
		next = 1,
		imgW = 1224,
		intervalTime = 1500;
let cursors = $('li');
let imgWrap = $('.imgWrap')[0];
// 定义导航cursors事件
for(let i=0,cursor;cursor=cursors[i];i++){
	// console.log('index:',i)
	addEvent(cursor,'mouseenter',(ev)=>{
		if(intervalID)clearInterval(intervalID)
		current = i;
		if(current==0){
			prev = 5;
		}else{
			prev = i-1;
		}
		if(current==5){
			next = 0;	
		}else{
			next = i+1;
		}
		// console.log(imgWrap.style.height)
		go(current+1);
		// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
		// console.log(`translateX(-${(current+1)*imgW}px)`)
	})
	addEvent(cursor,'mouseleave',()=>{
		// console.log('mouseleave');
		intervalID = setInterval(autoPlay, intervalTime);
	})
}
let go = step=>{
	imgWrap.style.transform = `translateX(-${step*imgW}px) translateZ(0)`;
	cursorClass();
}
let cursorClass = ()=>{
	for(let cursor of cursors){
		delClass(cursor,'z-active')
	}
	addClass(cursors[current],'z-active');
}
let changeIndex = ()=>{
	if(current==0){
		prev = 5;
		next = current+1;
	}else if(current==5){
		prev = current-1;
		next = 0;
	}else{
		prev = current-1;
		next = current+1;
	}
}
addClass(cursors[0],'z-active');
// 自动轮播 间隔1s
let autoPlay = ()=>{
	if(current==5) {
		current=0;
		new Promise(resolve=>{
		  imgWrap.style.transition = `all 0s`;
			// imgWrap.style.transform = `translateX(0) translateZ(0)`;
			go(0)
		  resolve();
		}).then(()=>{
			setTimeout(()=>{
				imgWrap.style.transition = `all .6s ease-in`;
				go(current+1);
				changeIndex();
				// prev = 5;
				// next = current+1;
				// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
			}, 200);
		})
	}else{
		current++;
		go(current+1);
		changeIndex();
		// prev = current-1;
		// if(current==5){
		// 	next = 0;
		// }
		// imgWrap.style.transform = `translateX(-${(current+1)*imgW}px) translateZ(0)`;
	}
	// cursorClass();
}
let intervalID = setInterval(autoPlay, intervalTime);
// 设置前后按键
let carousel = $('.carousel')[0]
// console.log(carousel);
let wardWrap = $('.wardWrap')[0]
// console.log(wardWrap);
let oWard = $('.wardWrap>img')
// console.log(oWard);
addEvent(carousel,'mouseenter',()=>{
	addClass(wardWrap,'z-show');
})
addEvent(carousel,'mouseleave',()=>{
	delClass(wardWrap,'z-show');	
})

// 上一张
addEvent(oWard[0],'click',()=>{
	clearInterval(intervalID);
	// console.log('prev:',prev);
	go(prev+1);
	current = prev;
	changeIndex();
	intervalID = setInterval(autoPlay, intervalTime);
})
// 下一张
addEvent(oWard[1],'click',()=>{
	clearInterval(intervalID);
	console.log('next:',next);
	go(next+1);
	current = next;
	changeIndex();
	intervalID = setInterval(autoPlay, intervalTime);
})
}();
</script>

可能有部分朋友有不清楚的地方，你可以在评论中给我留言

本轮播图可能有本人未发现的bug，发现的博友请给了我留言，感激不尽，谢谢！吐舌头

仿制element-ui的轮播头图原生实现，使用了部分es6语法，包含promise

猜你喜欢