0

自分のスライドショーを作成しようとしています。次のコードは、ある画像から別の画像にフェードインします。img1.jpgからimg4.jpgに切り替えたいのですが、変更するたびに一時停止する方法がわかりません。

                i++;
                temp = "img"+i+".jpg";
                $("#img").fadeOut(function() {
                    $(this).load(function() { $(this).fadeIn(); });
                    $(this).attr("src", temp);
                });

更新：コードを次のように変更しました。John Bokerのアドバイスにより、画像の名前をimg0、img1、img2、img3に変更しました。1枚目、2枚目、3枚目の画像に行きます。何か案は？

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>

            $(document).ready(function(){           
                var temp="";

                function slideshow(i)
                {
                    temp = "img"+i+".jpg";
                    $("#img").fadeOut(function() {
                         $(this).load(function() {
                                    $(this).fadeIn();
                                    // set a timeout of 5 seconds to show the next image;
                                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
                         });
                         $(this).attr("src", temp);
                    });
                }

                slideshow(0);


            });

        </script>
    </head>
    <body>
        <img src="img1.jpg" id="img"/>
    </body>
</html>
4

6 に答える 6

2

あなたはおそらくそれを関数の中に持っているべきです：

// show image i
function slideshow(i)
{
    temp = "img"+i+".jpg";
    $("#img").fadeOut(function() {
         $(this).load(function() {
                    $(this).fadeIn();
                    // set a timeout of 5 seconds to show the next image;
                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
         });
         $(this).attr("src", temp);
    });
}
于 2010-01-04T20:00:06.980 に答える
2

setIntervalを使用して、このように行うことができます。

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

loadコールバック内への（一見不要な）呼び出しをfadeOut削除し、不要なtemp変数を削除して、あなたが抱えている他の問題のいくつかを引き起こしている可能性のあるいくつかのことを単純化しました。

（最後に、これを学習するだけではない場合は、Cycleなどの多くの優れたスライドショープラグインの1つを使用することを検討してください。）

于 2010-01-04T20:01:17.710 に答える
2

この例をチェックしてください...

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});

フィドル

各画像を4秒ではなく8秒間一時停止する場合は、スクリプトの4000をに変更するだけです。8000

于 2012-05-31T17:32:13.993 に答える
0

設定し window.setInterval(function, delay)た間隔で関数を呼び出して、使用しているコードを実行するように設定します。

すでに画像を循環させるプラグインはたくさんあります（独自の画像を作成することが課題でない限り）。私の特にお気に入りの1つは、循環プラグインです。

于 2010-01-04T19:59:42.190 に答える
0

このjQueryスライドショーの質問を見てください

于 2010-01-04T19:59:59.210 に答える
0

1つのトリックは、タイマーを使用して要素のプロパティを現在の値にアニメーション化することです。

例えば

$("#img").fadeIn().show(3000).fadeOut();

$（this）はすでに表示されているため、.show（3000）を追加すると、要素がフェードアウトする前に3秒間表示されたままになります。

于 2010-01-04T20:33:08.677 に答える