Question

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

Answer 1

尝试将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属性。

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

1 个答案: