基本的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

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

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