Question

我正在尝试使用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的功能。

有谁知道如何解决这个问题。（我知道代码质量低......我在教自己）

以下是该页面的实时链接：My Page

感谢您的帮助!!

Answer 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。您将使用与上面相同的语法，但它应该让您知道该怎么做。

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

更改元素ID并在该ID上使用新函数

1 个答案: