Javascript 单击后更改图像

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

gallery.js

---

html

---

类似这样的代码是您需要的：

编辑似乎我误解了这个问题。我猜错误在于，正如人们评论的那样，您的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

---

保持简单。

ID是一个字符串。您可以尝试使用imgArry[parseInt（nameofImage.id，10）]，问题是什么？您没有列出任何错误或意外结果。ParseInt不起作用。问题是，单击后，例如id为“1”的图像将从id为“mainImage”的元素中消失。。。我想在单击其他元素后更改元素“mainImage”。。在我的例子中，它是id为“1”的元素。这是实际代码吗？还是仅仅是示例代码？nameOfImage是他想要传递的元素。id是那个img的id是的，对。我更新了答案以提出解决方案。无论如何，我发现使用锚的id设置另一个图像的src有点“脏”。谢谢你的建议，我发现了问题，问题出现在“Imgaray”中我的图库的链接中。。。地址前应该只有一个DOTE。谢谢大家。呵呵，典型的愚蠢错误。无论如何，遵循接吻原则！我已经更新了我的答案，这样你就不会有这种错误，你也不必维护任何带有图片路径的数组。

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

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;
}

<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

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

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;
}