Javascript自動下一張圖片

Question

我創建了這個網站，它使用一個簡單的javascript函數來顯示基於用戶鼠標移動或單擊右側編號框的圖像。現在經過測試，已經確定應該在其上添加自動幻燈片放映，以便在幾秒鐘後顯示下一張圖片。

http://www.philippedollo.com/photo/fineart/f_amw.htm

有沒有一種方法可以輕鬆地修改這個代碼，使其極易發生？ -

function showPic(whichpic) { 
    if (document.getElementById) { 
     document.getElementById('placeholder').src = whichpic.href; 
     if (whichpic.title) { 
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
     } else { 
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
     } 
     return false; 
    } else { 
     return true; 
    } 
} 

Answer 1

使用setInterval()。

function getNextPic() 
{ 
    // ??? 
} 

setInterval(function() 
{ 
    showPic(getNextPic()); 
}, 3000); // 3 seconds 

沒有必要爲if(document.getElementById)檢查，因爲該函數是100％跨瀏覽器。

function showPic(whichpic) 
{ 
    document.getElementById('placeholder').src = whichpic.href; 

    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title ? 
     whichpic.title : whichpic.childNodes[0].nodeValue; 

    return false; 
} 

Answer 2

下面應該爲你工作，我測試了它，它在我的最終工作正常。

var curPic, 
    gallery, 
    pics; 

function cyclePic(){ 
    if(curPic < pics.length){ 
     showPic(pics[curPic]); 
    } 
    curPic++; 
    setTimeout(cyclePic,5000); 
} 

function showPic (whichpic) { 
    if (document.getElementById) { 
     document.getElementById('placeholder').src = whichpic.href; 
     if (whichpic.title) { 
     document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
     } else { 
     document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
     } 
     return false; 
    } else { 
     return true; 
    } 
} 

window.onload = function(){ 
    curPic = 0, 
    gallery = document.getElementById("gallery"), 
    pics = gallery.getElementsByTagName("a"); 
    cyclePic(); 
}