0

私は自分のanimate（）メソッドを使用してカスタムスライディングギャラリーを作成しています。ギャラリーの画像をプリロードし、ページのロードが完了するとimage[0]を表示するスクリプトがあります。2秒の間隔の後、これまでのところ、css（）メソッドを使用して画像要素を左にスライドさせることができます。これまでのところ、これは機能します。

$(document).ready(function () {

            //pre-load images
            var i = 0;
            var images = new Array();
            images[0] = "images/environments/img0.jpg"
            images[1] = "images/environments/img1.jpg"
            images[2] = "images/environments/img2.jpg"
            images[3] = "images/environments/img3.jpg"

            $("img#cover").attr("src", images[0]);
                $(this).attr("src", images[1]).css("marginLeft","630px");

            $(function () {
                setInterval(function () {

                    $("img#cover").animate({
                        marginLeft: '-980px',
                        opacity: '1'
                    }, 2000);
                }, 2000);
            });

}); //end of document function

ここで、ギャラリー（配列）をスライドして、同じimg要素またはdivタグのどちらか最適な方で次の画像を表示する方法が必要です。したがって、2秒の間隔の後、「新しい」ものがスライドインし、「古い」ものが同時にスライドオフします。

imgタグに2つの画像を保存できるかどうかわかりませんか？これは可能ですか、それともdivタグを左にスライドさせる方が良いですか？

HTML：

<div id="mainimage"><img id="cover" src="" /></div>
4

3 に答える 3

0

imgタグ全体をdivに追加する方が良いと思います。そのようです：

<div id="mainimage">
   <img id="cover1" src="scr1.jpg" style="display:none;"/>
   <img id="cover2" src="scr2.jpg" style="display:none;"/>
   <img id="cover3" src="scr3.jpg" style="display:none;"/>
</div>

そして、好きなようにフェードインおよびフェードアウトします。

于 2012-11-29T17:11:15.283 に答える
0

古い画像をスライドアウトして、アニメーションが完了したら、img srcを変更し、反対側からスライドさせます（1-srcを変更、2-表示を設定：非表示、3-反対側に画像を配置、 4セット表示：ブロック、5スライドアニメーション）。

スライドアウトとスライドインは同時には行われませんが、素晴らしい効果を得ることができます。

スライドイン/スライドアウトを同時に行う必要がある場合は、2つのimgタグも使用します。

このアイデアがお役に立てば幸いです

于 2012-11-29T17:16:34.000 に答える
0

4つの画像を用意し、overflow：hidden属性を使用してそれらをdivでマスクすることをお勧めします。

// Your markup
<div id="imgMask" style="overflow:hidden; height:200px; width:200px;">
    <div id="inner" style="position:relative; left:0;">
        <img src="images/environments/img0.jpg" />
        <img src="images/environments/img1.jpg" />
        <img src="images/environments/img2.jpg" />
        <img src="images/environments/img3.jpg" />
    </div>
</div>

// Your js
function slideLeft(){
    $('#inner').animate({
        left: -200px;
    },2000, function(){
        $('#inner img').eq(0).remove().appendTo('#inner');
        $('#inner').css({
            'left',0
        });
    });
}

このように、複数の画像ではなく、1つの親要素のみをスライドさせます。お役に立てば幸いです。上記のコードはテストされていませんが、画像の高さと幅が200ピクセルであると想定しています。もちろん、スタイルシートでは、このようにインラインにするよりもスタイルの方が適しています。

于 2012-11-29T17:18:54.847 に答える