顯示圖像陣列中的圖像 - Javascript

Question

我的主頁上顯示了一個大圖像，當用戶單擊「next_img」按鈕時，主頁上的大圖像應該變爲陣列中的下一圖像。

但是，點擊後的下一個箭頭什麼也不做，主頁上的主圖像不會改變。

我需要在javascript中執行此操作。

在HTML：

<!--Main Content of the page --> 

<div id="splash"> 
<img src="images/img/Splash_image1.jpg" alt="" id="mainImg"> 

</div> 

<div id="imglist"> 
<a href="javascript:nextImage('mainImg')"><img src="images/next_img.png" alt=""></a> 

然後在javascript文件：

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'images/img/Splash_image3.jpg'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'images/img/Splash_image4.jpg'; 

imgArray[4] = new Image(); 
imgArray[4].src = 'images/img/Splash_image5.jpg'; 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

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

任何幫助，將不勝感激。謝謝。

Answer 1

就像Diodeus說的，你在比較Image和HTMLDomObject。反而比較他們的.src屬性：

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'images/img/Splash_image1.jpg'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'images/img/Splash_image2.jpg'; 

/* ... more images ... */ 

imgArray[5] = new Image(); 
imgArray[5].src = 'images/img/Splash_image6.jpg'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
    var img = document.getElementById(element); 

    for(var i = 0; i < imgArray.length;i++) 
    { 
     if(imgArray[i].src == img.src) // << check this 
     { 
      if(i === imgArray.length){ 
       document.getElementById(element).src = imgArray[0].src; 
       break; 
      } 
      document.getElementById(element).src = imgArray[i+1].src; 
      break; 
     } 
    } 
} 

Answer 2

這是你的問題：

if(imgArray[i] == img) 

你的數組元素相對於一個DOM對象。

Answer 3

這是一個稍微乾淨的方式來實現這個。這會做出以下更改：

1. 代碼被幹掉了一點以刪除多餘的重複代碼和字符串。
2. 代碼更通用/可重用。
3. 我們使緩存成爲一個對象，因此它具有自包含的接口，並且有更少的全局變量。
4. 我們比較了.src屬性而不是DOM元素，以使其正常工作。

代碼：

function imageCache(base, firstNum, lastNum) { 
    this.cache = []; 
    var img; 
    for (var i = firstNum; i <= lastnum; i++) { 
     img = new Image(); 
     img.src = base + i + ".jpg"; 
     this.cache.push(img); 
    } 
} 

imageCache.prototype.nextImage(id) { 
    var element = document.getElementById(id); 
    var targetSrc = element.src; 
    var cache = this.cache; 
    for (var i = 0; i < cache.length; i++) { 
     if (cache[i].src) === targetSrc) { 
      i++; 
      if (i >= cache.length) { 
       i = 0; 
      } 
      element.src = cache[i].src; 
      return; 
     } 
    } 
} 

// sample usage 

var myCache = new imageCache('images/img/Splash_image', 1, 6); 
myCache.nextImage("foo"); 

導向，DRYed方法，這多個對象的一些優點：

1. 您可以通過只在數字序列生成的圖像，並改變一個數字添加更多圖片值，而不是複製更多行數組聲明。
2. 只需創建多個imageCache對象，就可以在應用程序中使用這個多個位置。
3. 您可以通過更改一個字符串而不是N個字符串來更改基本URL。
4. 代碼尺寸較小（因爲刪除了重複的代碼）。
5. 緩存對象可以很容易地擴展，以提供更多的功能，比如第一個，最後，跳過，等...
6. 您可以添加集中式錯誤處理在一個地方，所以如果一個不存在圖像和不加載成功，它會自動從緩存中刪除。
7. 您可以在其他網頁上，你只改變參數構造函數，而不是實際上改變的是實現代碼重用開發此。

P.S.如果你不知道DRY是什麼意思，那就是「不要重複自己」，基本上意味着你永遠不應該擁有許多類似代碼的副本。任何時候，你都應該將它減少到一個循環或函數，或者不需要大量類似代碼的副本。最終的結果會更小，通常更易於維護，並且通常更易於重用。

Answer 4

此外，當檢查最後一張圖片時，您必須與imgArray.length-1進行比較，因爲，例如，當數組長度爲2時，我將採用值0和1，它不會達到值2，所以您必須長度爲-1不與長度相比，這裏是固定線：

if(i == imgArray.length-1) 

Answer 5

這是一個簡單的例子，並嘗試將它與你使用一些修改結合起來。我更喜歡你設置在一個陣列中的所有圖像，以便使你的代碼更易於閱讀和更短：

var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg", 
    "_images/image4.jpg","_images/image5.jpg","_images/image6.jpg"]; 

var imageIndex = 0; 

function changeImage() { 
    myImage.setAttribute("src",imageArray[imageIndex]); 
    imageIndex = (imageIndex + 1) % imageArray.length; 
} 

setInterval(changeImage, 5000); 

Answer 6

<script type="text/javascript"> 
function bike() 
{ 
var data= 
["b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg", "b6.jpg", "b7.jpg", "b8.jpg"]; 
var a; 
for(a=0; a<data.length; a++) 
{ 
document.write("<center><fieldset style='height:200px; float:left; border-radius:15px; border-width:6px;")<img src='"+data[a]+"' height='200px' width='300px'/></fieldset></center> 
} 
}