0

スライドショー効果が常に再開するように、関数でループを作成したいと思います。

これが私のフィドルです：http：//jsfiddle.net/Be67B/

画像1が画像2に移動するのはすべて良いことですが、画像1にフェードバックしてから、画像2に移動するというように、常にそのようにループするようにします。

これを機能させるには、コードに何を追加する必要がありますか？

4

6 に答える 6

3

ループを使用しないでください。ブラウザにアニメーションステップを繰り返し呼び出すように依頼してください。

setInterval(function(){
   // your animation (in fact just a step)
}, someDelay);

デモンストレーション： http： //jsfiddle.net/dystroy/nPh6S/

この正確なケースでは、アニメーションは次のように実行されます。

setInterval(function(){
    $("#top").fadeOut(function() {
        $(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
            $(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
        });
     }
    );
}, 4000);
于 2012-07-20T15:51:47.760 に答える
2

このjqueryサイクルプラグインを参照してください：

http://jquery.malsup.com/cycle/

これはあなたが望むものかもしれません

于 2012-07-20T15:50:49.630 に答える
1

遷移を実行する関数を作成できます。この関数は、メソッドの一部としてコールバック関数を持ち、fadeInそれ自体を呼び出して次の遷移をトリガーします。これは、一定のループ内にあります。

変更したjsfiddleは次のとおりです：http： //jsfiddle.net/Be67B/1/

HTML：

<img id="top" src="http://coreldrawtips.com/images/applebig.jpg" width="300" height="300" />​

Javascript：

$(document).ready(function(){
  transition(false);
});

function transition(first)
{
    var src = first ? "http://coreldrawtips.com/images/applebig.jpg" : "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png";

    $("#top").delay(1000).fadeOut(function() {
        $(this).attr("src",src).fadeIn(function() {
            transition(!first);
        });
    });    
}
    ​
于 2012-07-20T15:53:12.613 に答える
0

私はちょうどこのコードを作りました：

$(document).ready(function(){
   // images in the pool
   var images=["http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-     I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png",
           "http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png"];

      // next image to display
      var next = 0;

      // interval beetween images
      var INTERVAL = 1000;

      // main function
      var doCarrousel = function() {
         $("#top").fadeOut(function() {
             $(this).attr("src", images[next]).fadeIn(
                 function() {
                   setTimeout(doCarrousel, INTERVAL);
                 });
          });
          if (++next >= images.length)
             next = 0;
       };

       //start carrousel
       doCarrousel();
});

フィドラー： http： //jsfiddle.net/Be67B/

于 2012-07-20T15:58:50.913 に答える
0

プラグインを使用します。しかし、あなたはそれを手で行うことができます。画像のsrcを変更しないことをお勧めします。これは、safariがloadイベントを発生させないなど、一部のブラウザーはそれをうまく処理できないためです。

代わりに、すべての画像をコンテナ内に配置し、それらの可視性を循環させます。

$(document).ready(function(){
    var currentImage = $("#images img:first");

    setInterval(function(){
        currentImage.fadeOut();

        if(currentImage.next().size())
            currentImage = currentImage.next();
        else
            currentImage = currentImage.siblings().first();

        currentImage.fadeIn();
    }, 1000)
});

フィドルを参照してください：http：//jsfiddle.net/Be67B/2/

于 2012-07-20T16:02:02.807 に答える
0

迅速で汚い：jsFiddleの例

function swap(img) {
    img = (img == 'http://coreldrawtips.com/images/applebig.jpg') ? 'http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png' : 'http://coreldrawtips.com/images/applebig.jpg';
    $('#top').delay(2000).fadeOut(function() {
        $(this).attr('src', img)
    }).fadeIn(function() {
        setTimeout(function() {
            swap(img)
        }, 1000);
    });
};
swap($('#top').attr('src'));​
于 2012-07-20T16:02:53.207 に答える