1

いくつかの画像があり、前/次のリンクをクリックすると特定の div に読み込まれます。画像がループします。前または次のボタンをクリックすると、JS は画像のソースを変更し、次の画像を読み込みます。コードは機能します。

そして今、私の問題。より良い効果を得るために、完全にロードされたときにすべての新しい画像をフェードインしたいのですが、それを機能させることができません。さまざまなソースからまとめたコードは、最初の画像に対してのみ機能します。

Jquery に関する私の知識は非常に基本的なものなので、コードは単純なものにしたいと考えています。サイトを検索したところ、同様の問題と解決策がたくさん見つかりましたが、うまくいきませんでした。

10月10日追加 2012: @jbabey は私の基本的な質問 (以下を参照) に対して良い答えを出しましたが、別の問題が発生しました。nex/prev ボタンをクリックすると、新しい画像が読み込まれる (そしてフェードインする) のを待っているときに、画像のコンテナーが縮小します。これは、新しいイメージが完全に読み込まれるまで隠されているためだと理解しています。しかし、JS を変更して、最初に読み込まれた画像 (ページの読み込み時に読み込まれる基本的な画像) のコンテナーの高さを「記憶」する方法はありますか。そのため、前/次をクリックすると、画像のコンテナーは前の画像の高さを保持します。ページのデザイン上、コンテナの高さを設定できません。

どんな助けでも大歓迎です。

元の機能:

// Next image on button (and image) click
$('#swapnextimg,#imgId').click( function() {
    curIdx = (curIdx+1) % max;
    $("#imgId").attr('src', imgSrcBase+images[curIdx]+'.jpg');
});

// Prev image on button click
$('#swapprevsimg').click( function() {
    curIdx = (curIdx+max-1) % max;
    $("#imgId").attr('src', imgSrcBase+images[curIdx]+'.jpg');
});

完全な例: http://jsfiddle.net/S_Ajd/6vHSb/

@jbabey のコード: http://jsfiddle.net/jbabey/6vHSb/28/

4

1 に答える 1

1

作成したコードを取得して最初の画像をフェードインし、前のボタンと次のボタンのクリックハンドラーに配置します。

// Next image on button (and image) click
$('#swapnextimg,#imgId').click( function() {
    curIdx = (curIdx+1) % max;
    $("#imgId").hide().attr('src', imgSrcBase+images[curIdx]+'.jpg')
    .load(function () {
        $(this).fadeIn(1000);
    });
});

// Prev image on button click
$('#swapprevsimg').click( function() {
    curIdx = (curIdx+max-1) % max;
    $("#imgId").hide().attr('src', imgSrcBase+images[curIdx]+'.jpg')
    .load(function () {
        $(this).fadeIn(1000);
    });
});

http://jsfiddle.net/jbabey/6vHSb/28/

于 2012-10-09T13:41:01.293 に答える