jQueryスライドショー

StackOverflow https://stackoverflow.com/questions/2001770

質問

私が作り出してしまおうというものを自分のスライドショー.次のコードは薄れから、一つの画像です。いサイクルからimg1.jpg へimg4.jpg がんなどの一時停止後に変化します。

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

更新:私のコードは下記までお願いします。いBokerのアドバイスいに名称変更の画像をimg0,img1,img2,img3.ではfirst,second,thirdおよびそのイメージだけで停止します。そのアイデア?

<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>
役に立ちましたか？

解決

を使用して、このように行うことができます セット間隔:

$(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 変数。

(最後に、学習のためだけにこれを行っているわけではない場合は、世の中に数多くある優れたスライドショー プラグインの 1 つを使用することを検討してください。 サイクル.)

他のヒント

あなたはおそらく関数内のことを持っている必要があります：

// 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);
    });
}

この例をチェックアウト... 

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

の フィドルのの

単にあなたが8秒の代わりに、4秒の各画像上で一時停止したい場合は、スクリプトで4000する8000を変更します。

タグをこの jQueryのスライドショーの質問を見てみましょう

設定 window.setInterval(function, delay) 電話機能でセットの間隔を実行するコードです。

あたっぷりのプラグインでサイクルの画像できない場合に挑戦は、シンプルにわかりやすく書くご)、私が特に気には、 サイクルのプラグイン.

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

例：

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

$（これは）の.SHOW（3000）を追加すると、その要素は、

をフェードアウトする前に3秒のために表示されたまま意味、すでに表示されているので
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top