首页 / 脚本样式 / JavaScript / 原生JS实现匀速图片轮播动画

需求：
1 根据图片动态添加小圆点
2 目标移动到小圆点轮播图片
3 鼠标离开图片，定时轮播图片；鼠标在图片上时暂停
4  左右两侧可点击轮播图片    

一、布局部分

html部分

<div class="w main clearfix"><！--主内容部分开始--><div class="slider"><！--轮播图部分开始--><ul class="imgs" id="slider_imgs"> <li><img src="images/slider01.jpg" id="slider1" alt=""/> </li> <li><img src="images/slider02.jpg" id="slider2" alt=""/> </li> <li><img src="images/slider03.jpg" id="slider3" alt=""/> </li> <li><img src="images/slider04.jpg" id="slider4" alt=""/> </li> <li><img src="images/slider05.jpg" id="slider5" alt=""/> </li> <li><img src="images/slider01.jpg" id="slider0" alt=""/> </li></ul> <div class="arrow" id="arrow"><a href="javascript:;" class="arrow_1"><</a><a href="javascript:;" class="arrow_2">></a> </div> </div><！--轮播图部分结束--> </div>

.slider ul.imgs{height:453px;width:4380px;position:absolute;}.slider ul.imgs li{display:block; width:730px;height:453px;float:left;}.slider .circle{position:absolute;left:50%;bottom:8px;}.slider .circle li{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color:#3e3e3e;border-radius: 50%;text-align: center;color:#fff;}.slider .circle li.current{background:pink;color:white;}

/****obj:做动画的DOM对象***target:对象最终运动到的目标位置（X轴）*/function animate（obj,target） {//每次调用要先清定时器clearInterval（obj.Timer）;//根据目标位置判断移动的方向，每到目标位置步长为20，否则为-20var speed = target>obj.offsetLeft?20:-20;obj.Timer =setInterval（function （） {var left = obj.offsetLeft;obj.style.left = left+speed+"px";var result = target-left;//目标位置与当前位置在步长20以内，则到达目标位置if（Math.abs（result）<=20）{//停止运动clearInterval（obj.Timer）;//有20像素差距我们直接跳转目标位置obj.style.left=target+ "px"; }},2函数：`这里写代码片0）;}

function slider（）{//焦点图信息DOM节点var imgs=document.getElementById（"slider_imgs"）;var slides =imgs.parentNode;var lis =imgs.getElementsByTagName（"li"）;var arrows = document.getElementById（"arrow"）;var arrowLink=arrows.children;//创建小圆点var circle=document.createElement（"ol"）;circle.setAttribute（"class","circle"）;imgs.parentNode.appendChild（circle）;for（var i=0,len=lis.length-1;i<len;i++）{var li =document.createElement（"li"）;li.innerHTML = i+1;circle.appendChild（li）;}//marginLeft=-imgli（length）*olLi（width）/2circle.style.marginLeft = （-13*len）+"px";var olLis =circle.children;olLis[0].className="current";//为小圆点添加鼠标事件for（var i=0;i<olLis.length;i++）{//当前小圆点索引olLis[i].index = i;olLis[i].onmouseover=function （） {for（var j=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）;};//定时器部分var Time=null,k=0,z=0;Time=setInterval（autoPlay,1000）;//自动轮播图片，定时器Timefunction autoPlay（） {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（var j=0;j<olLis.length;j++） {olLis[j].className = "";}olLis[z].className="current";}var q=0;var p=0;arrowLink[1].onclick=function （） {q++;if（q>lis.length-1）{imgs.style.left=0;q=1;}p++;if（p>olLis.length-1）{p=0;}for（var j=0;j<olLis.length;j++） {olLis[j].className = "";}olLis[p].className="current";animate（imgs,q*（-lis[0].offsetWidth））;}}