單擊時更改圖像（6圖像循環）

我有6張圖像需要通過點擊圖像進行交換，但似乎無法獲得正確的代碼以便進入下一張圖片單擊時更改圖像（6圖像循環）

HTML

<img src="BCover.jpg" id="ImgGallery" onclick="ImgGallery()"/>

的JavaScript

var counter = 1; 

ImgGallery.onclick = function(){ 
if (counter == 1){ 
    document.getElementById("ImgGallery").src = "BCover.jpg"; 
    counter++; 
} 
else if (counter == 2){ 
    document.getElementById("ImgGallery").src = "MechGP.jpg"; 
    counter++; 
} 
else if (counter == 3){ 
    document.getElementById("ImgGallery").src = "Mech2.jpg"; 
    counter++; 
} 
else if (counter == 4){ 
    document.getElementById("ImgGallery").src = "Mech3.jpg"; 
    counter++; 
} 
else if (counter == 5){ 
    document.getElementById("ImgGallery").src = "Mech4.jpg"; 
    counter++; 
} 
else if (counter == 6){ 
    document.getElementById("ImgGallery").src = "MCA1.png"; 
    counter==1; 
} 
};

來源

2015-10-07 Aaron Macaulay

注意分配是'='。還有什麼不在這個代碼工作，任何錯誤？有一個更簡單的方法來做到這一點，但固定後==「。 [它似乎沒有問題]（http://jsfiddle.net/caxw4vrc/）。 –

當我點擊圖片時，它不會切換到下一張圖片。 –

是的，看看小提琴。請注意，您想將'ImgGallery'更改爲'document.getElementById（「ImgGallery」）'，因爲「ImgGallery」在所有的broswers中都不起作用。 –

的問題（比斯賓塞的評論AB等out == assignment）似乎是ImgGallery應該是一個函數的名稱，而不是對元素的引用，因爲它被稱爲img元素的onclick屬性中的函數。

我將ImgGallery()函數更名爲rotateGallery以消除元素id的歧義。

我也花了一些自由來清理你的代碼，通過使用數組循環而不是switch語句來處理img庫旋轉。

<img src="BCover.jpg" id="ImgGallery" onclick="rotateGallery()"/> 


var counter = 0, 
    gallery = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"], 
    rotateGallery = function() { 
     document.getElementById("ImgGallery").src = gallery[counter]; 
     counter++; 
     if (counter >= gallery.length) { 
      counter = 0; 
     } 
    };

來源

2015-10-07 02:50:12

*「ImgGallery應該是一個函數的名稱，因爲它在onclick中引用」* - 實際上它可以（可以）使用** id引用該元素* *'ImgGallery'。 –

但他已經在元素中創建了一個'onclick'屬性。所以他的意圖似乎是定義一個旋轉圖像的函數。 –

我同意，OP未知可能會爲其元素設置一個工作的「onclick」。 –

這可以幹掉一點。您可以將所有圖像包含在數組中。 JavaScript沒有原生的方法，但可以使用以下算法實現它。

var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"]; 
var gallery = document.getElementById("ImgGallery"); 
var index = 0; 

gallery.addEventListener("click", function() { 
    gallery.src = images[index]; 
    index = (index === images.length - 1) ? 0 : index + 1; 
});

我知道click監聽器裏的最後一條語句似乎不可思議，但我想寫儘可能少的代碼越好。

來源

2015-10-07 02:52:38

很好的答案。看起來非常熟悉。「ImgGallery」需要一個資本「我」。 –

這是解決'array＃cycle'問題的常用算法。但是，我們都有同樣的想法。並感謝您指出拼寫錯誤。我沒有注意到 –

ImageGallery不是一個會導致錯誤的函數。

但是，主要錯誤是counter==1;，在第三行。 ==運算符用於測試值是否具有相同的值（雖然不一定是相同的類型），但對於賦值，使用正常的=運算符。試試這個：

//First, create an array of images (so you can support as many images in the gallery as needed, only needing to update this array) 
 
var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"], 
 
    //and a counter to loop through 
 
    c = 0; 
 

 
//this function is triggered when the image is clicked on sending the image element as a parameter 
 
function nextImg(elem){ 
 
    //if c is less than the array's length - 1, then add 1 to c, otherwise make c equal 0 
 
    c = (c != images.length - 1) ? c + 1 : 0; 
 
    //actually change the src attribute of the image 
 
    elem.src = images[c]; 
 
    //and just let you know what image you're up to 
 
    document.getElementsByTagName('p')[0].innerHTML = 'Image no. '+(c+1)+'. File name of image: '+images[c]; 
 
}

/* Make the image visible */ 
 
img{ 
 
    cursor: pointer; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<img id='ImageGallery' onclick='nextImg(this)' /> 
 
<p>Notice the onclick attribute</p>

來源

2015-10-07 02:58:36 Tobsta

* ImageGallery是undefined *不是真的，在這種情況下它使用** id **'ImageGallery'引用元素。 –

@SpencerWieczorek它是未定義的。我在提供的代碼中引用了第3行。 – Tobsta

如果沒有在JavaScript中直接定義，大多數瀏覽器（和現代瀏覽器）都會將'ImageGallery'解釋爲對具有'ImageGallery'的id或名稱的元素的引用。 –

單擊時更改圖像（6圖像循環）

回答

相關問題