2

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

所以，我的问题与语法有关。我想替换那条线

文档.bigImage.src = pic3.src

所以这个数字是从id中获取的。

4

1 回答 1

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顺便说一句，您可以（并且应该）为这些元素使用非数字属性。

于 2012-05-08T21:41:00.857 回答