javascript - 基本的javascript图片库逻辑错误？

Question

我尝试制作一个非常简单的图片库，除了后退功能之外，它的大部分功能都可用。下一个函数完美地循环，但后面的函数包含一个空白图像(它无法找到图像)，我认为我的逻辑有问题，但我不确定在哪里，如果有人能指出它，我将非常感激。错误消息是:GET file:///G:/eject/undefined net::ERR_FILE_NOT_FOUND

 var myImage= new Array(); 
myImage[1]="images/product/linkin.jpg";       
myImage[2]="images/product/lisagerrard.jpg";
myImage[3]="images/product/maddy.jpg";
myImage[4]="images/product/mariah.jpg";

var image = 1;
function next()
{ 
    image++;
    document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
    if (image==4)
    {
    image = 0;
    }
  }

function  back()
{
 image--;
    document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
    if (image== 0)
    {
    image = 5;
    }
}

html:

  <a id ="f1" onclick="back();return false;" href="#"> back </a> <a id ="f2" onclick="next();return false;" href="#"> next </a>

Answer 1

问题出在后面的函数中，您递减计数器，然后在进行越界检查之前尝试显示图像。要解决此问题，请将越界检查移至尝试显示图像之前:

function  back()
{
    image--;
    if (image== 0)
    {
        image = 4; // also go to 4 not 5
    }
    document.getElementById("picture3").style.background = 'url(' + myImage[image] + ')';
}