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(); 
}