0

JavaScriptを使ってアニメーションを作りたいです。

画像を繰り返す (ループ) 必要があります。問題は、スクリプトが最終画像に到達したときに空きスペースがあることです。

私が欲しいのは: pic1 > pic2 > pic3 > pic4 > pic5 > pic1 > ...

コード：

<style type="text/css">
    img { 
        position: absolute; 
        center: 0px; 
        top: 0px; 
    }

    #img3 { z-index: 3; }
    #img2 { z-index: 2; }
    #img1 { z-index: 1; }
</style>

<img style="top: 0px; height: 199px;" src="img1.jpg" id="img1">
<img img2.jpg" id="img2"><img src="img3.jpg" id="img3">


<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(function() {
        $('img').first().fadeOut(2000, function suivante() {
            $(this).next('img').fadeOut(2000,suivante);
        });
    });
</script>

私が見つけたのは、関数 bis() を使用する必要があるということですが、方法がわかりません!

4

2 に答える 2

0

このコードを試してください

これをスクリプトセクションに保管してください

 var image1 = new Image()
    image1.src = "images/1.jpg"
    var image2 = new Image()
    image2.src = "images/2.jpg"
    var image3 = new Image()
    image3.src = "images/3.jpg"
    var image4 = new Image()
    image4.src = "images/4.jpg"
    var image5 = new Image()
    image5.src = "images/5.jpg"
    var image6 = new Image()
    image6.src = "images/6.jpg"
    var image7 = new Image()
    image7.src = "images/7.jpg"



<img src="images/1.jpg" name="slide" style="float:left;padding-right:10px;height:100px;width:250px" />
                 <script>
        <!--
            //variable that will increment through the images
            var step = 1
            function slideit() {
                //if browser does not support the image object, exit.
                if (!document.images)
                    return
                document.images.slide.src = eval("image" + step + ".src")
                if (step < 7)
                    step++
                else
                    step = 1
                //call function "slideit()" every 2.5 seconds
                setTimeout("slideit()", 2000)
            }
            slideit()
        //-->
        </script>
于 2013-05-13T08:53:10.363 に答える
0

すべての画像をフェードアウトして非表示にするだけで、再び表示されることはありません。関数 suivante() の先頭に次のコードを追加します。

if($(this).attr("id")==="img5"){

    $('img').attr("display","block");

}
于 2013-05-13T09:06:34.550 に答える