关于焦点图的实现方法

1、把所有图片放在一起使其浮动，a绑定事件，向左移动800的倍数（第几张图片）

window.onload=function(){
    var li = document.getElementById('banner_imgs');
    var a = document.getElementsByClassName('number')[0].getElementsByTagName('a');
    for(var i=0;i<a.length;i++){
        a[i].id=i;
        a[i].onmouseover=function(){
            for(var j=0;j<a.length;j++){
                a[j].className='';     //清除当前a样式
            }
            a[this.id].className='on'; //给当前a添加样式
            li.style.left=-this.id*800+'px';
        }
    }
}

2、创建一个定时器，每过一段时间更换一张图片。封装一个函数，遍历所有图片并设置属性dsplay为none。index作为参数传入恢复为block。再绑定移入移出事件停止和继续定时器。

  window.onload=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic').getElementsByTagName("li"),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;

      // 定义并调用自动播放函数
        if(timer){
            timer.clearInterval(timer);
            timer=null;
        }
        timer=setInterval(function(){
            index++;
            if(index>4){
                index=0;
            }
            changepic(index);
        },2000)
      // 定义图片切换函数
     function changepic(cindex){
        for(var i=0;i<5;i++){
                list[i].className="";
                pic[i].style.display="none";
            }
            list[cindex].className="on";
            pic[cindex].style.display="block"; 
            index=cindex;
     }
     // 鼠标划过整个容器时停止自动播放
    wrap.onmouseover=function(){
        clearInterval(timer);
        timer=null;
    }
     // 鼠标离开整个容器时继续播放至下一张
     wrap.onmouseout=function(){
         timer=setInterval(function(){
            index++;
            if(index>4){
                index=0;
            }
            changepic(index);
        },2000)
     }
    
     // 遍历所有数字导航实现划过切换至对应的图片
     for(var j=0;j<5;j++){
         list[j].id=j;
         list[j].onmouseover=function(){
             changepic(this.id);
         }
     }
   }

.3、使用myfocus插件，还可以更换焦点图的样式。省去写代码的过程