从javascript数组交换多个图像 [英] Swap multiple images from javascript array

问题描述

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

I am coding a website with multiple pages of thumbnail image galleries. I want to populate the thumbnail images on each page from an array, so that I won't have to change the path of multiple images on each page. The folder path is defined in a var statement - which I would like to be the only unique element on each gallery page - and the images in each gallery's folder will have the same names (t1.jpg, t2.jpg, etc.).

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

I have the main image swap working, and tried to use a similar function for the thumbnails, but it doesn't work because the image ID is the same for all the thumbnail images. I could give each image a unique ID, but then would have to call a separate function for each thumbnail swap (15 per page).

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

I am a javascript novice and despite much searching I can't figure out how to work around this or find any similar examples. Any help or advice would be appreciated.

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>

推荐答案

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

Each ID attribute on the page should be unique. Remove them and rewrite your code as:

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

相应的HTML部分看起来像

And the corresponding HTML part will look like

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

ps：实际上我没有看到该脚本的用途 - onload 在将图像加载到 preloadImages（）函数之前，可以触发函数。

ps: Actually I do not see the purpose of that script - onload function could be triggered before the image is loaded in a preloadImages() function.

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

pps: try this code http://jsfiddle.net/4cKvs/ and jQuery variant http://jsfiddle.net/zSBNR/

这篇关于从javascript数组交换多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！