如何爲多個圖像交換圖像

我對編程知識很少。我發現這個JavaScript的一點點，它允許你點擊一個圖像上的鼠標，這將導致它在另一個地方加載另一個點擊返回到原始圖像，這是一個獎金也很好，當在觸摸設備瀏覽器。我將用它在照片前後顯示。但是代碼只允許在屏幕上顯示單個圖像。任何人都可以通過解釋或提供代碼來幫助我，以便能夠在頁面上以垂直方式顯示任意數量的圖像，並將這種行爲附加到每個圖像上。你的幫助將不勝感激。如何爲多個圖像交換圖像

下面是代碼：

</body> 
</html> 
<SCRIPT LANGUAGE=JavaScript> 
intImage = 2; 
function swapImage() { 
switch (intImage) { 
case 1: 
    IMG1.src = "http://www.danhero.com/riggs1.jpg" 
    intImage = 2 
    return(false); 
case 2: 
    IMG1.src = "http://www.danhero.com/riggs2.jpg" 
    intImage = 1 
    return(false); 
} 
} 
</SCRIPT> 
</HEAD> 
<BODY><center> 
<IMG id="IMG1" name="IMG1" src="http://www.danhero.com/riggs1.jpg" 
onclick="swapImage();"> 
</BODY> 
</HTML>

來源

2014-02-15 user3313868

<!doctype html> 
<html> 
<head> 
<style> 
#place img { 
    display: block; 
    margin: 10px 0; 
} 
</style> 
</head> 
<body> 
<div id="place"> 
</div> 
<script> 
var p = document.getElementById('place'); 
var images = [ 
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"], 
    ["http://www.danhero.com/riggs1.jpg", "http://www.danhero.com/riggs2.jpg"] 
]; 

function swapImage() { 
    var id = +this.id.substring(3); 
    if(this.src === images[id][0]) this.src = images[id][1]; 
    else this.src = images[id][0]; 
} 

for(var i = 0, l = images.length; i < l; ++i) { 
    var dt = document.createElement('img'); 
    dt.setAttribute('id', 'img' + i); 
    dt.setAttribute('src', images[i][0]); 
    dt.onclick = swapImage; 
    p.appendChild(dt); 
} 
</script> 
</body> 
</html>

代碼工作在方式：

頁過程中加載空div id爲「地方」會填充陣列「圖像」的圖像。

這個變量是每個圖像有兩個鏈接的數組，第一個將顯示，第二個用於交換圖像。沒有計數器，檢查圖像的來源（src），如果它與數組中的第一個元素相匹配，則它將圖像換成第二個，反之亦然。

圖片有id =「img」+我，其中我是一個計數器（img0，img1，img2等）。

在觸摸屏上我沒有檢查過，但這應該屬於即使iPhone上觸摸事件也支持的點擊事件。

來源

2014-02-15 18:24:47 Evil

嗨EvilJS，可能使用這個評論部分不正確，但想要說非常感謝你這樣一個驚人的快速反應和完美的答案。那樣做就像我想要的一樣，我非常感謝你的幫助。乾杯 – user3313868

還有一件事，我將如何去增加顯示圖像之間的中斷？非常感謝。 – user3313868

我在樣式部分添加了邊距 - 10px 0表示豎直放置10px邊距，水平放置0。乾杯;） – Evil

如何爲多個圖像交換圖像

回答

相關問題