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外掛，還可以更換焦點圖的樣式。省去寫程式碼的過程