1

我正在尝试使用 javascript 构建缩略图幻灯片。我对 Javascript 很陌生，所以我的做法可能有点奇怪......

我遇到的问题是我有一个主图像，然后我有 4 个缩略图。当我单击第一个缩略图时，它会更改主图像和第一个缩略图。但是当我点击更改后的缩略图时，它需要用另一张照片（与新缩略图对应的照片）更改主图像

我用这样的调用初始化我的函数：

document.getElementById('thumb1').onclick=thumbs1;

哪个使用此功能：

function thumbs1(){
    num1 = 1;
    num2 = 0;
    var src1 = largeArray[num1];
    var src2 = thumbArray[num2];
    document.getElementById('main').src=src1;
    document.getElementById('one').src=src2;
    document.getElementById('one').id='change';
}

我正在尝试将新缩略图的 id 更改为“更改”并调用另一个函数，如下所示：

document.getElementById('change').onclick=changed;

这使用了以下功能：

function changed(){
    num1 = 0;
    var src1 = largeArray[num1];
    document.getElementById('change').src=src1;
    document.getElementById('change').id='one';
}

使用 Firebug 时，我发现了错误，我认为这是由于调用document.getElementById('change').onclick=changed;. 浏览器找不到元素 ID“更改”，因为我还没有调用更改 ID 的函数。

有谁知道如何解决这个问题。（我知道代码质量很差......我在自学）

这是该页面的实时链接：我的页面

谢谢你的帮助！！

4

1 回答 1

1 
var array = //id's of your images here. you could type them static or search your document for images and get their id attribute.

document.addEventListener("click", function(e){
    var clicked_image = e.target || e.srcElement; //using jquery can help with this cause older versions of IE are stupid, but depends on if you want to support them. 
    var id = clicked_image.getAttribute(id);
    var temp = document.getElementById("main").src;

    for (var i = 0; i < array.length; i++){
        if(array[i] == id){
            document.getElementById("main").src = clicked_image.src;
            clicked_image.src = temp;
        }
    }
})

这非常快速和肮脏，你最好eventlisteners只分配给你的图像。您将使用与上述相同的语法，但它应该让您知道该怎么做。

有了这个，您不必担心点击了什么图像，您只需更改主要内容，然后将拇指更改为主要内容。因此，您消除了尝试跟踪每个图像是什么的麻烦。

于 2012-12-03T04:19:32.127 回答