关于焦点轮播图的优化

前段时间，自己试着写了一个带有焦点图轮播的代码，思路大概是这样的，首先，想写无间断滚动图片的函数，于是：

 var flag=0; 
        var scroll=document.getElementById("scroll");
        var pic=scroll.getElementsByTagName("div");
        var scrolldots=document.getElementById("scrolldots");
        var dots=scrolldots.getElementsByTagName("span");
        function show(){
            pic[flag].style.display="block"; //对应的div样式变为"block"
            dots[flag].style.backgroundColor="#fff";
            //对应的小圆点的样式改变
            for(var i=0,len=pic.length;i<len;i++){
                pic[i].id=i;
                dots[i].id=i;
                if(i!=flag){
                    pic[i].style.display="none";
                    dots[i].style.backgroundColor="#e3daef";
                }
             } 

            flag++;
            if(flag==pic.length){
                flag=0;
            }
            //通过for循环把剩余的样式改变
        };
        var show1=setInterval(show,3000);

接着，又想写点击上一张下一张的事件和点击小圆点的事件，于是：

var pic_scroll=document.getElementById("pic_scroll");
var a=pic_scroll.getElementsByTagName("a");//获取的是左右两个剪头的图标
function handler(){
                //获取到当前显示的图片的id,并将它赋值给falg3;
                for(var i=0,len=pic.length;i<len;i++){
                    if(pic[i].style.display=='block'){
                        flag3=i;
                    }
                }
                //如果是左键头的情况，判断并作出相应的改变
                if(this.id==0){
                    if(flag3==0){
                        flag3=len-1;
                    }else {
                        flag3--;
                    }
                    pic[flag3].style.display="block";
                    for(var i=0;i<len;i++){
                        if(i!=flag3){
                           pic[i].style.display="none";
                        }
                    }
                }
                //如果是右箭头的情况，判断并作出相应的改变
                else if(this.id==1){
                    if(flag3==len-1){
                        flag3=0;
                    }
                    else {
                        flag3++;
                    }
                    pic[flag3].style.display="block";
                    for(var i=0;i<len;i++){
                        if(i!=flag3){
                           pic[i].style.display="none";
                        }
                    }
                }
         }
         //又完成了点击小圆点的事件函数，其中小圆点的id和图片滚动的id是对应的，所以只需判断点击的是哪个小圆点然后改变相应的样式就可以了。
          for(var i=0;i<dots.length;i++){
            dots[i].id=i;
            EventUtil.addHandler(dots[i],"click",function(){
                dots[this.id].style.backgroundColor="#fff";
                pic[this.id].style.display="block";
                for(var i=0;i<pic.length;i++){
                    if(i!=this.id){
                        pic[i].style.display="none";
                        dots[i].style.backgroundColor="#e3daef";
                    }
                }
            });

以上的函数基本都是想到哪写哪看上去比较乱。
又写了一个图片滑动轮播的函数，感觉较上面那个条理一些。
首先，addloadEvent是写到public.js里面的一个函数，大概相当于window.onload=function(){};接着，把需要用到的变量首先都获取到。然后我首先写的是next（下一张）和prev（上一张）的点击函数，在这其中，涉及到图片滑动的距离和相应的小圆点背景色的改变。把图片滑动的距离封装成一个函数animate(),把对应的小圆点背景色改变封装成函数showButton(),index被定义成一个全局变量，记录的是背景色为对应背景色的小圆点的id。接下来是小圆点的点击函数通过点击的index减去当前的index然后乘以相应的位移数。最后完成对图片不断滚动的效果的实现，即响度昂与不断触发next.onclick函数。

addLoadEvent(function(){ 
       var pic_scroll=document.getElementById("pic_scroll");
       var scroll_content=document.getElementById("scroll_content");
       var buttons=document.getElementById("buttons").getElementsByTagName("span");
       var prev=document.getElementById("prev");
       var next=document.getElementById("next");
       var index=1;
       var timer;//自动播放的变量
        var animated=false;//代表滚动图片已经结束;
       function showButton(){
          for (var i=0;i<buttons.length;i++)
          {
               if(buttons[i].className=="on")
               {
                  buttons[i].className="";
               }
          }
          buttons[index-1].className="on";
       } 

       function animate(offset){
          var newleft=parseInt(scroll_content.style.left)+offset;
          var time=300;//位移总时间
          var interval=10;//位移间隔时间
          var speed=offset/(time/interval);//每次的位移量
          function go(){
              if((speed<0&&parseInt(scroll_content.style.left)>newleft)||(speed>0&&parseInt(scroll_content.style.left)<newleft)){
                scroll_content.style.left=parseInt(scroll_content.style.left)+speed+'px';
                setTimeout(go,interval);//interval时间后运行go函数
                animated=true;
              }else {
                animated=false;
                  if(newleft<-4989){
                      newleft=-1663; 
                  }
                  if(newleft>-1663)
                  {
                      newleft=-1663;
                  }
                  scroll_content.style.left=newleft+'px';
              }
          }
          go();
        }
       prev.onclick=function(){
        if(animated==false){
           animate(1663);
         }
            if(index==1){
            index=3
          }else{
            index--;
          }
          showButton();
        
       }
       next.onclick=function(){
        if(animated==false)
        {
          animate(-1663); 
        }
          if(index==3){
            index=1;
          } else
          {
            index++;
          }
          showButton();
       }
       for (var i=0;i<buttons.length;i++)
       {
          buttons[i].onclick=function(){
             var myindex=this.getAttribute("index");
             if(myindex==index){
                return;
             }
             var offset=-1663*(myindex-index);
             index=myindex;
             if(animated==false)
             {
                animate(offset);
              }
             showButton();
          }
         
       }
       function play(){
          timer=setInterval(function(){
            next.onclick();
          },3000);
       }
       function stop(){
          clearInterval(timer);
       }
       pic_scroll.onmouseover=stop;
       pic_scroll.onmouseout=play;
       play();
       
   })