无法通过图像返回阵列

Question

我已经花了整整一天的时间，并且明天需要它，所以我怀疑我今晚会有任何睡眠，但如果有人能解决这个问题，我会非常感激，因为它是让我发疯。

我已经尝试了很多方法，但是这是代码：http://www.mediafire.com/download/xibb998x4yg5avc/Image_JavaScript_Array_help!.zip

这是它的照片：http://i.imgur.com/NgQk5P2.jpg

基本上我有图像的表：

<td><a href="#zoomedIn"><img id="0" onclick="showLarge(this);" src="Media//Gallery//img_1.png" alt="Gallery Image 1" /></a></td> 
<td><a href="#zoomedIn"><img id="1" onclick="showLarge(this);" src="Media//Gallery//img_2.png" alt="Gallery Image 2" /></a></td> 
<td><a href="#zoomedIn"><img id="2" onclick="showLarge(this);" src="Media//Gallery//img_3.png" alt="Gallery Image 3" /></a></td> 
<td><a href="#zoomedIn"><img id="3" onclick="showLarge(this);" src="Media//Gallery//img_4.png" alt="Gallery Image 4" /></a></td> 
<td><a href="#zoomedIn"><img id="4" onclick="showLarge(this);" src="Media//Gallery//img_5.png" alt="Gallery Image 5" /></a></td> 

而“showLarge（this）;事件处理程序将调用此函数：

function showLarge(img) { 
    var largeFrame = document.getElementById("zoomedIn"); 
    largeFrame.style.visibility = 'visible'; 
    var largeImage = document.getElementById("largeImage"); 
    largeImage.src = img.src; 
    findIndex(img.src); 
} 

function findIndex(src) { 
    for (var i = 0; i = imgArray.length; i++) 
     if (imgArray[i].src == src) { 
      currentImage = i; 
     } 
} 

这是用来当你点击一个较小的图像，如图片的背景所示，它会打开一个框架，并给大图像帧的小图像源，使小图像显得大得多。

然而，不工作的部分是有两个按钮：一个是下一个按钮，另一个是上一个按钮。我曾尝试两种方法：“changeImage（方向）”，这似乎从来没有工作，这一个：

function nextImage(event) { 
     var img = document.getElementById("largeImage"); 

     for(var i = 0; i < imgArray.length;i++) 
     { 
      if(imgArray[i].src == img.src) 
      { 
       if(i === imgArray.length){ 
        img.src = imgArray[0].src; 
        break; 
       } 
       img.src = imgArray[i+1].src; 
       break; 
      } 
     } 
    } 

第二个让我使用的下一个按钮，但如果我试图扭转它前面的按钮那么它不起作用。我只想点击图片，然后隐藏图片并点击另一张图片，效果完全相同。我建议下载代码并自己尝试一下。

谢谢！

Answer 1

首先，如果这是一个班级，你必须这样做，很好，但你真的应该使用unobtrusive javascript。 我建议采取这样的方法，一旦图像被点击，你使用它的ID（因为你已经ID所有图像），并使用该数字来循环图像。只需调用“changeImage（）”方法并将其传递给您要切换的图像的ID，而不是使用next/back。这是解决这个问题的最快方法。所以：

1）给所有这些幻灯片图像一个类，如“slideshowImage”。

2）使用javascript动态地为它们分配一个onclick函数：“changeImage（）”。

3）内部changeImage（）使用点击图像的ID来打开图像。您可以在下一步重用changeImage（）。 4）如果由于点击图像元素而导致changeImage（）未运行（例如，幻灯片已经打开并且您点击了下一个/上一个），则增加或减少先前点击的ID号，并且重新运行该功能以更改图像。

希望有帮助（现在没有时间给你一个代码snippit ......但这应该指向你在正确的方向）。另外，使用无标注的JS更清洁，而且更重要的是绝对的行业标准。