单击后更改图像

Question

我无法创建简单的画廊照片。单击小图像后，我需要为主图像重新加载图像。

gallery.js

imgArray = [  
  '../images/1.jpg',
  '../images/2.jpg',
  '../images/3.jpg',
  '../images/4.jpg',
  '../images/5.jpg',
  '../images/5.jpg'
];

function changeImage(nameOfImage){        
  document.getElementById('mainImage').src = imgArray[nameOfImage.id];
}

---

html

<div align="center" class="mainImageDiv">
  <img id="mainImage" src="images/action/1.jpg" alt="1.jpg, 206kB" title="1" height="600" width="500">
</div>

<a href="#" id="1" onClick="changeImage(this)"><img src="images/action/min1.jpg" alt="min1.jpg, 18kB" title="min1" height="120" width="100" /></a>
<a href="#" id="2" onClick="changeImage(this)"><img src="images/action/min2.jpg" alt="min2.jpg, 18kB" title="min2" height="120" width="100" /></a>

Answer 1

你需要的代码是这样的：

http://jsfiddle.net/M2BSu/

var imgArray = [  
 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Brain_human_sagittal_section.svg/295px-Brain_human_sagittal_section.svg.png',
 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Solanum_muricatum_Flower_and_Fruit.jpg/220px-Solanum_muricatum_Flower_and_Fruit.jpg'
];

var counter = 0;
document.getElementById('my_button').onclick = function () {  
    document.getElementById('mainImage').src = imgArray[counter % imgArray.length]; 
    counter += 1;
}

编辑看来我误解了这个问题。正如人们评论的那样，我猜错误是您的 id 不是有效的数组索引。您可以改用真实的对象，如下所示：

<a href="#" id="a_full_name" onClick="changeImage(this)">

var images = {
    'a_full_name': 'path to image',
    'another_img_id': 'path to this image'
};

function changeImage(anchor_object){   ... } // what you are passing is not the name of the image

这样你的代码就可以工作了。数组在 JavaScript 中不是很可靠（因为它们不是真正的数组）

编辑：一旦发现问题，我会为您提供这个简单的解决方案来解决您的问题。一如既往，越简单越好。不要读取任何数组或任何东西，只需从小图像的路径中获取大图像的路径。您不必在 html 和数组的同时进行任何烦人的维护。您只需要在缩略图和大图之间保持一致的命名即可。

html 你真的不需要锚元素。如果您想要指针鼠标，请更改 CSS

<img onClick="changeImage(this)" src="images/action/min1.jpg" title="min1" />

JavaScript

function changeImage(image_clicked){   // you pass the image object     
    var min_path = image_clicked.src;

    // adapt the path to point to the big image, in this case get rid of the "min"
    var big_path = min_path.replace("min", "");

    document.getElementById('mainImage').src = big_path;
}

保持简单。