在同学的帮助下，终于使用纯js代码实现了动态轮播，学无止境加油吧！
效果图是这样的，我们需要定义一个div，并放入三张图片，还需要左右两个按钮，以及底下三个按钮三个div。
先看布局代码
<div> <ul > <li ><img src="https://www.jb51.net/article/k1.jpg"></li> <li ><img src="https://www.jb51.net/k-2.jpg"></li> <li><img src="https://www.jb51.net/k-3.jpg"></li> </ul> <div></div> <div></div> <div></div> </div>
如何是css部分
.clear:after{ display:block; content:""; clear:both; } .banner{ width: 100%; position:relative; height: 390px; } .banner ul{ width: 100%; height: 390px; list-style-type:none; overflow: hidden; } .banner ul li{ width: 100%; position: absolute; } .pageNav{ position: absolute; left:50%; bottom:20px; transform: translateX(-50%); } .pageNav a{ display:inline-block; margin:0 5px; width: 20px; height: 20px; background-color:#fff; border-radius:50%; border:2px solid #000; cursor:pointer; } .pageNav a.cur{ background-color:red; } .leftBtn, .rightBtn{ position:absolute; top: 50%; transform:translateY(-50%); width: 40px; height: 50px; background-color:rgba(0, 0, 0, 0.5); cursor:pointer; } .leftBtn{ left:0; } .rightBtn{ right:0; } .leftBtn:hover,.rightBtn:hover{ background-color:rgba(0, 0, 0, 0.8); }
接下来是js部分
var banner=document.getElementById("banner"); var ul=banner.getElementsByTagName("ul")[0]; var li=ul.getElementsByTagName("li"); var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false; for(var i=0;i<li.length;i++){//给图片底下添加按钮 pageA=document.createElement("a"); if(i==0){ pageA.className="cur"; } pageNav.appendChild(pageA); } pageNav.addEventListener('click',pageNavClick,false); function pageNavClick(e){ if(state){ return; } e=e||window.event;//兼容性考虑 for(var i=0;i<li.length;i++){ if(pageNav.children[i]==e.target){ index=n; var offset=i-n; n=i; showBtn(n); if(offset>0){ showImg(-100); }else{ showImg(100); } } } } function showBtn(index){ for(var z=0;z<li.length;z++){ pageNav.children[z].className=""; } pageNav.children[index].className="cur"; } function showImg(offset){ clearInterval(timerElem); var speed=offset/20; timerElem=setInterval(function(){ state=true; if(parseInt(li[n].style.left)==0){ state=false; clearInterval(timerElem); li[n].style.left="0"; for(var l=0;l<n;l++){ li[l].style.left="-100%" } for(var r=n+1;r<li.length;r++){ li[r].style.left="100%"; } }else{ li[n].style.left=parseInt(li[n].style.left)+speed+"%"; li[index].style.left=parseInt(li[index].style.left)+speed+"%"; } },100) } leftBtn.onclick=function(){ if(state){ return; } index=n; n--; if(n<0){ n=li.length-1; li[n].style.left="-100%"; } showBtn(n); showImg(100); } rightBtn.onclick=function(){ if(state){ return; } index=n; n++; if(n>li.length- 1){ n=0; li[n].style.left="100%"; } showBtn(n); showImg(-100); } var timer; timer=setInterval(autoLunbo,3000); function autoLunbo(){ rightBtn.onclick(); } banner.onmouseover=function(){ clearInterval(timer); } banner.onmouseout=function(){ timer=setInterval(autoLunbo,3000); }