2

これは本当に新しい質問かもしれませんが、ここで本当に助けが必要です.5つのサムネイルと大きな画像があります.

私がやりたいことは、サムネイルをクリックすると大きな画像が変わることです。大きな画像は常にアニメーション gif です。そのため、プリロードされた画像を使用しました。（srcだけを変更してもアニメーションが表示されないFFで問題がありました）

これがコードです

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から取得されます。

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 に答える