今天花了点时间实现了原生的轮播头图。比较简单,就不详细讲解了,相信聪明的你一定可以理解我的代码。
这是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,发现的博友请给了我留言,感激不尽,谢谢!