原生JS实现匀速图片轮播动画

原生JS实现匀速图片轮播动画需求：1根据图片动态添加小圆点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节点varimgs=document.getElementById("slider_imgs");varslides=imgs.parentNode;varlis=imgs.getElementsByTagName("li");vararrows=document.getElementById("arrow");vararrowLink=arrows.children;//创建小圆点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){