原生JS實現(xiàn)勻速圖片輪播動畫需求：1根據(jù)圖片動態(tài)添加小圓點(diǎn)2目標(biāo)移動到小圓點(diǎn)輪播圖片3鼠標(biāo)離開圖片，定時輪播圖片；鼠標(biāo)在圖片上時暫停4左右兩側(cè)可點(diǎn)擊輪播圖片一、布局部分html部分<divclass="wmainclearfix"><!--主內(nèi)容部分開始--><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><!--輪播圖部分結(jié)束--></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這是勻速動畫函數(shù)的封裝/****obj:做動畫的DOM對象***target:對象最終運(yùn)動到的目標(biāo)位置（X軸）*/functionanimate(obj,target){//每次調(diào)用要先清定時器clearInterval(obj.Timer);//根據(jù)目標(biāo)位置判斷移動的方向，每到目標(biāo)位置步長為20，否則為-20varspeed=target>obj.offsetLeft?20:-20;obj.Timer=setInterval(function(){varleft=obj.offsetLeft;obj.style.left=left+speed+"px";varresult=target-left;//目標(biāo)位置與當(dāng)前位置在步長20以內(nèi)，則到達(dá)目標(biāo)位置if(Math.abs(result)<=20){//停止運(yùn)動clearInterval(obj.Timer);//有20像素差距我們直接跳轉(zhuǎn)目標(biāo)位置obj.style.left=target+"px";}},2函數(shù)：`這里寫代碼片0);}輪播圖封裝函數(shù)：functionslider(){//焦點(diǎn)圖信息DOM節(jié)點(diǎn)varimgs=document.getElementById("slider_imgs");varslides=imgs.parentNode;varlis=imgs.getElementsByTagName("li");vararrows=document.getElementById("arrow");vararrowLink=arrows.children;//創(chuàng)建小圓點(diǎn)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";//為小圓點(diǎn)添加鼠標(biāo)事件for(vari=0;i<olLis.length;i++){//當(dāng)前小圓點(diǎn)索引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));//當(dāng)鼠標(biāo)挪到定時器，當(dāng)前播放圖片與原點(diǎn)位置回原k=z=p=q=this.index;};}//鼠標(biāo)移動到輪播圖，不定時播放slides.onmouseover=function(){//清除自動輪播定時器clearInterval(Time);};//鼠標(biāo)移開，自動輪播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){