0

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

1 回答 1

0 
<!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 上也支持。

于 2014-02-15T18:24:47.530 回答