14

ループ内で互いにフェードしたい4つの画像があります。私は次のようなものを持っています：

<img src="/images/image-1.jpg" id="featureImg1" />
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" />
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" />
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" />

この場合、絶対配置を使用することはできませんが、HTML を修正する必要があります。サイトの他の場所でjQueryを使用しているので、利用できます。画像が大きいため、すぐに読み込まれない画像にも対処する必要があります。

4

4 に答える 4

21

jQuery Cycleプラグインを強くお勧めします。この場合、探している以上のことができるかもしれませんが、よく構造化されており、セットアップが簡単です。フェード トランジションのみをサポートするjQuery Cycle Liteと呼ばれる軽量バージョンもあります。

于 2009-01-16T06:16:12.353 に答える
5

次のようにadivと anを使用できます。img

<div id="featureImgContainer">
    <img src="/images/image-1.jpg" id="featureImg" />
</div>

Javascript で次のようなことを行います (pseudo-jQuery):

function rotateImage(newImage) {
    var oldImage = $("#featureImg").image();

    $("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL

    $("#featureImg").image(newImage).opacity(0).fadeIn();
}

基本的に、divの背景を「古い」画像にしimg、新しい画像にします。不透明度を 0 に設定しimgてフェードインすると、古い画像が新しい画像にフェードインするように見えます。フェードイン後、divは表示されなくなります。

CSS を適切に設定して、必要に応じて の幅/高さdivと背景位置を設定するように注意してください。

于 2009-01-16T06:05:42.717 に答える
1

jQuery の拡張機能も見つけました: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

それほど多くのコードはありませんが、非常にうまく機能しているようです。

編集：私はかなり頻繁に使用し、非常にうまく機能しているNivo Sliderも見つけました. また、「ナビゲーション」と前/次のボタンを持つ機能もあります。とても便利です。

于 2009-01-16T06:10:32.053 に答える
1

jQuery のコアにとどまり、ループで z-index を表示することができます。

それは非常に簡単な方法で行うことができます...

于 2009-01-18T17:20:49.253 に答える