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

如果您是Javascript新手，我建议您在谷歌搜索一下 jQuery它可以帮到你很多（谷歌也使用它）。

Answer 2

页面上的每个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/

从javascript数组交换多个图像

2 个答案: