window.onload=function(){

? ? var wrap=document.getElementById('wrap'),

? ? ? ? list1=document.getElementById('pic').getElementsByTagName('li'),

? ? ? ? list=document.getElementById('list').getElementsByTagName('li'),

? ? ? ? index=0,

? ? ? ? timer=null;

? ? ? // 定義并調用自動播放函數

?function auto(){

?timer=setInterval(function(){

?index++;

?if(index>=list.length){

?index=0;

?}

?changeImg(index);

?},2000)

? ?}

? ? ? auto();

? ? ? // 定義圖片切換函數

?function changeImg(curIndex){

?for(i=0;i<list.length;i++){

?list[i].className="";

?list1[i].style.display="none";

?}

?list[curIndex].className="on";

?list1[i].style.display="block";

?index=curIndex;

?}

? ? ?

? ? ?// 鼠標劃過整個容器時停止自動播放

wrap.onmouseover=function(){

? ? ? ? ? clearInterval(timer);

}

? ? ?// 鼠標離開整個容器時繼續播放至下一張

? ? ?wrap.onmouseout=auto;

? ? ?// 遍歷所有數字導航實現劃過切換至對應的圖片

for(var j=0;j<list.length;j++){

? ? ? ? ? list[j].id=j;

? ? ? ? ? list[j].onmouseover=function(){

? ? ? ? ? ? changeImg(this.id) ? ? ? ??

? ? ? ? ? }

? ? ? ? }

? }