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

保持简单。

点击后更改图像

gallery.js

HTML

1 个答案: