Question

我对编程知之甚少。我发现这个很棒的一点点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>

Answer 1

<!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>

代码以这种方式工作：

在页面加载期间，ID为“place”的空div填充了数组“images”中的图像。

此变量是每个图像有两个链接的数组，第一个将显示，第二个用于交换图像。没有计数器，图像被检查其源（src），如果它与数组中的第一个元素匹配，那么它将图像交换为秒，反之亦然。

图片有id =“img”+ i，其中i是一个计数器（img0，img1，img2等）。

在触摸屏上我还没有检查过，但这应该属于点击事件，即使在iPhone上也支持触摸事件。

如何为多个图像交换图像

1 个答案: