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