var img=document.getElementById('img'); var list=document.getElementById('index').getElementsByTagName('li'); var index=0;//这里定义index是变量，不是属性 var nextMove=function(){//一直向右移动，最后一个之后返回 index+=1; if(index>=list.length){ index=0; } moveIndex(list,index); moveElement(img,-720*index,0,20); };
图片的自动轮播需要用到setInterval()函数，让程序每隔几秒自动调用nextMove()函数：
var play=function(){ timer=setInterval(function(){ nextMove(); },2500); };
鼠标覆盖小圆点效果
要实现鼠标覆盖哪个小圆点，就呈现出对应的图片这一效果，需要知道鼠标覆盖的是哪个小圆点，这里给每个li都添加一个自定的属性index，使该属性的值为对应的小圆点的序号i(0~n-1，n为li的个数)，这样每次鼠标覆盖时只需获取index属性的值即可知道鼠标覆盖的是哪个小圆点。注意，该index属性和变量index没有丝毫的关系，只有相同的名字。
for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈，图片就移动到哪个小圆圈，并停止 list[i].index=i;//这里是设置index属性，和index变量没有任何联系 list[i].onmouseover= function () { var clickIndex=parseInt(this.index); moveElement(img,-720*clickIndex,0,20); index=clickIndex; moveIndex(list,index); clearInterval(timer); }; list[i].onmouseout= function () {//移开后继续轮播 play(); }; }
总结
轮播图的实现并不复杂，主要在于将图片的移动行为和小圆点的移动行为分开，这样就比较容易实现。这个轮播图其实还是有点问题的，从最后一幅图滑向第一个时滑动的距离较长，其实也很好解决，将滑动的方式改一下，这里是根据-720*index来计算最终的left值，而index是将图片的移动和小圆点的移动绑到一起，将滑动方式改成现在的offsetLeft+（-720），图片的移动就可以与index值无关，然后在html文件增加一幅图片：
<li><img src="https://www.jb51.net/images/img1.jpg" alt="img1"></li> <li><img src="https://www.jb51.net/images/img2.jpg" alt="img2"></li> <li><img src="https://www.jb51.net/images/img3.jpg" alt="img3"></li> <li><img src="https://www.jb51.net/images/img4.jpg" alt="img4"></li> <li><img src="https://www.jb51.net/images/img5.jpg" alt="img5"></li> <li><img src="https://www.jb51.net/images/img1.jpg" alt="img1"></li>
然后在滑到最后一幅图片时，迅速的将偏移量赋值0，变成第一幅，两幅图一样，无法分辨其中变化，即可达到无缝连接。
if(x_pos==-3600){ ele.style.left='0'; ele.style.top='0'; }else{ ele.style.left=x_pos+'px'; ele.style.top=y_pos+'px'; }