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