原生JS實現(xiàn)勻速圖片輪播動畫

原生JS實現(xiàn)勻速圖片輪播動畫需求：1根據圖片動態(tài)添加小圓點2目標移動到小圓點輪播圖片3鼠標離開圖片，定時輪播圖片；鼠標在圖片上時暫停4左右兩側可點擊輪播圖片一、布局部分html部分<divclass="wmainclearfix"><!--主內容部分開始--><divclass="slider"><!--輪播圖部分開始--><ulclass="imgs"id="slider_imgs"><li><imgsrc="images/slider01.jpg"id="slider1"alt=""/></li><li><imgsrc="images/slider02.jpg"id="slider2"alt=""/></li><li><imgsrc="images/slider03.jpg"id="slider3"alt=""/></li><li><imgsrc="images/slider04.jpg"id="slider4"alt=""/></li><li><imgsrc="images/slider05.jpg"id="slider5"alt=""/></li><li><imgsrc="images/slider01.jpg"id="slider0"alt=""/></li></ul><divclass="arrow"id="arrow"><ahref="javascript:;"class="arrow_1"><</a><ahref="javascript:;"class="arrow_2">></a></div></div><!--輪播圖部分結束--></div>css部分.sliderul.imgs{height:453px;width:4380px;position:absolute;}.sliderul.imgsli{display:block;width:730px;height:453px;float:left;}.slider.circle{position:absolute;left:50%;bottom:8px;}.slider.circleli{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color:#3e3e3e;border-radius:50%;text-align:center;color:#fff;}.slider.circleli.current{background:pink;color:white;}JS部分1這是勻速動畫函數的封裝/****obj:做動畫的DOM對象***target:對象最終運動到的目標位置（X軸）*/functionanimate(obj,target){//每次調用要先清定時器clearInterval(obj.Timer);//根據目標位置判斷移動的方向，每到目標位置步長為20，否則為-20varspeed=target>obj.offsetLeft?20:-20;obj.Timer=setInterval(function(){varleft=obj.offsetLeft;obj.style.left=left+speed+"px";varresult=target-left;//目標位置與當前位置在步長20以內，則到達目標位置if(Math.abs(result)<=20){//停止運動clearInterval(obj.Timer);//有20像素差距我們直接跳轉目標位置obj.style.left=target+"px";}},2函數：`這里寫代碼片0);}輪播圖封裝函數：functionslider(){//焦點圖信息DOM節(jié)點varimgs=document.getElementById("slider_imgs");varslides=imgs.parentNode;varlis=imgs.getElementsByTagName("li");vararrows=document.getElementById("arrow");vararrowLink=arrows.children;//創(chuàng)建小圓點varcircle=document.createElement("ol");circle.setAttribute("class","circle");imgs.parentNode.appendChild(circle);for(vari=0,len=lis.length-1;i<len;i++){varli=document.createElement("li");LHTML=i+1;circle.appendChild(li);}//marginLeft=-imgli(length)*olLi(width)/2circle.style.marginLeft=(-13*len)+"px";varolLis=circle.children;olLis[0].className="current";//為小圓點添加鼠標事件for(vari=0;i<olLis.length;i++){//當前小圓點索引olLis[i].index=i;olLis[i].onmouseover=function(){for(varj=0;j<olLis.length;j++){olLis[j].className="";}this.className="current";//圖片切換imgs的CSS部分加上定位animate(imgs,this.index*(-lis[0].offsetWidth));//當鼠標挪到定時器，當前播放圖片與原點位置回原k=z=p=q=this.index;};}//鼠標移動到輪播圖，不定時播放slides.onmouseover=function(){//清除自動輪播定時器clearInterval(Time);};//鼠標移開，自動輪播slides.onmouseout=function(){Time=setInterval(autoPlay,1000);};//定時器部分varTime=null,k=0,z=0;Time=setInterval(autoPlay,1000);//自動輪播圖片，定時器TimefunctionautoPlay(){k++;if(k>lis.length-1){imgs.style.left=0;k=1;}animate(imgs,k*(-lis[0].offsetWidth));z++;if(z>olLis.length-1){z=0;}for(varj=0;j<olLis.length;j++){olLis[j].className="";}olLis[z].className="current";}varq=0;varp=0;arrowLink[1].onclick=function(){q++;if(q>lis.length-1){imgs.style.left=0;q=1;}p++;if(p>olLis.length-1){