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

时间:2012-05-08 21:21:22

标签: javascript jquery syntax

这可能是一个非常新的问题,但我真的需要帮助,我有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:

<ul>
    <li><img src='/card_thumb1.jpg' id="1" class="cardThumb"></li>
    <li><img src='/card_thumb2.jpg' id="2" class="cardThumb"></li>
    <li><img src='/card_thumb3.jpg' id="3" class="cardThumb"></li>            
</ul>

<img id="bigImage" name="bigImage" src='card_large1.gif' width="800" height="550"  />

所以,我的问题是更多的语法相关。我想替换那一行

document.bigImage.src = pic3.src

所以号码来自id。

1 个答案:

答案 0 :(得分:2)

尝试将Image对象存储在另一个对象的属性中,而不是为每个对象使用单独的变量。

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属性。