从javascript数组交换多个图像

Question

我正在编写一个包含多页缩略图画廊的网站。我想从数组中填充每个页面上的缩略图，这样我就不必更改每个页面上多个图像的路径。文件夹路径在 var 语句中定义——我希望它是每个画廊页面上唯一的唯一元素——并且每个画廊文件夹中的图像将具有相同的名称（t1.jpg、t2.jpg 等）。

我有主图像交换工作，并尝试对缩略图使用类似的功能，但它不起作用，因为所有缩略图图像的图像 ID 都相同。我可以给每张图片一个唯一的 ID，但随后必须为每个缩略图交换调用一个单独的函数（每页 15 个）。

我是一个 javascript 新手，尽管进行了很多搜索，但我无法弄清楚如何解决这个问题或找到任何类似的示例。任何帮助或建议将不胜感激。

Javascript：

<script language="JavaScript" type="text/javascript">
<!--

// Thumbnail Image Array
var imgThumbs = new Array (
"t1.jpg",
"t2.jpg",
"t3.jpg"
)

//Main Image Array
var imgArray = new Array (
"f1.jpg",
"f2.jpg",
"f3.jpg"
)

//Image Path
var imgPath = "images/portfolio/samples/";

function preloadImages() {
     for(var i = 0; i < imgArray.length; i++) {
          var tmpImg = new Image;
          tmpImg.src = imgPath + imgArray[i];
     }
}

//Thumbnail Image Swap Function
function loadThumb(thumbID) {
     var theThumb = document.getElementById('theThumb');
     var newThumb;
     newThumb = imgThumbs[thumbID];
     theThumb.src = imgPath + newThumb;
}

//Main Image Swap Function
function swapImage(imgID) {
     var theImage = document.getElementById('theImage');
     var newImg;
     newImg = imgArray[imgID];
     theImage.src = imgPath + newImg;
}


//-->
</script>

HTML：

<div id="portfolio">
  <div id="thumbnails">
    <a href="#" class="dimmer" onclick="swapImage(0)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(0)"  alt="Architect Portfolio Thumbnail 1" width="75" height="75" /></a>
    <a href="#" class="dimmer" onclick="swapImage(1)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(1)" alt="Architect Portfolio Thumbnail 2" width="75" height="75" /></a>
    <a href="#" class="dimmer" onclick="swapImage(2)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(2)" alt="Architect Portfolio Thumbnail 3" width="75" height="75" /></a>
  </div>
  <div id="mainImage"><img src="images/portfolio/samples/f1.jpg" alt="Architecture Portfolio Main Image" id="theImage" /></div>
</div>

Answer 1

页面上的每个 ID 属性都应该是唯一的。删除它们并将您的代码重写为：

function loadThumb(thumbID, obj) {
     var newThumb = imgThumbs[thumbID];
     obj.src = imgPath + newThumb;
}

相应的 HTML 部分会是这样的

<img src="images/portfolio/noThumb.jpg" onload="loadThumb(0, this)"  
    alt="Architect Portfolio Thumbnail" width="75" height="75" />

ps：实际上我看不到该脚本的用途 - onload 函数可以在图像加载到 preloadImages() 函数之前触发。

pps：试试这个代码http://jsfiddle.net/4cKvs/和jQuery变体http://jsfiddle.net/zSBNR/

Answer 2

如果您是 Javascript 新手，我建议您在 google 中搜索关于 jQuery 它可以帮助你很多（谷歌也在使用它）。