無法通過圖像返回陣列

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更清潔，而且更重要的是絕對的行業標準。