javascript-语法-更改预加载的图像

这可能是一个非常新的问题，但我这里真的需要帮助，我有5个缩略图和一个大图像

我只想做的是，当你点击一个缩略图时，大图像会改变。大图像总是一个动画gif，这就是为什么我使用了一些预加载的图像。（我在FF上遇到了一个问题，仅更改src时动画没有显示）

这是密码

function preloader()
{
if (document.images)
    {
      pic1= new Image(800,550);
      pic1.src='contest-landing/card_large1.gif';

      pic2= new Image(800,550);
      pic2.src='contest-landing/card_large2.gif';

      pic3= new Image(800,550);
      pic3.src='contest-landing/card_large3.gif';
    }
}

$j("li img").on("click", function(){
     var whatImage = $j(this).attr('id');
     //document.bigImage.src = pic3.src That is working, its always showing the image #3
     document.bigImage.src = pic+whatImage.src // I cant get that to work, so it doesnt show always the same image
 });

HTML:

所以，我的问题与语法更相关。我想换掉那条线

document.bigImage.src=pic3.src

---

因此，数字取自id。

尝试将图像对象存储在另一个对象的属性中，而不是对每个对象使用单独的变量

var pics = {}; // An object to hold our Images. Always use `var` to declare variables!

function preloader() {

    if (document.images) {

        pics[1] = new Image(800, 550);
        pics[1].src='contest-landing/card_large1.gif';

        pics[2] = new Image(800, 550);
        pics[2].src='contest-landing/card_large2.gif';

        pics[3] = new Image(800, 550);
        pics[3].src='contest-landing/card_large3.gif';

    }
}

$j("li img").on("click", function(){
    var whatImage = this.id;
    document.getElementById('bigImage').src = pics[whatImage].src;
});

---

顺便说一下，您可以（也应该）为这些元素使用非数字的

id

属性

Gnaa…：这就是我想说的@创造性hehe，我本来打算放弃这个，但是我开始有了关于

eval

答案和

$（this.attr（'id'）

和

id=“1”

的可怕想法，我的良心战胜了我：这也是我的恐惧！（特别是EVAL！uargs）这就是为什么我真的要支持你的帖子谢谢，但我的问题仍然存在，当我单击my.gif时，动画没有显示，我看到一个静态图像。知道我该怎么解决吗？@Lelly我做了一个更新，看看现在对你是否有效。如果不是的话，可能还有别的事情发生。。。看看是否可以在jsfiddle.net上重新创建问题

var pics = {}; // An object to hold our Images. Always use `var` to declare variables!

function preloader() {

    if (document.images) {

        pics[1] = new Image(800, 550);
        pics[1].src='contest-landing/card_large1.gif';

        pics[2] = new Image(800, 550);
        pics[2].src='contest-landing/card_large2.gif';

        pics[3] = new Image(800, 550);
        pics[3].src='contest-landing/card_large3.gif';

    }
}

$j("li img").on("click", function(){
    var whatImage = this.id;
    document.getElementById('bigImage').src = pics[whatImage].src;
});