0

私はJSの初心者なので、ここで気楽にやってください。しかし、私は簡単なスライドショーを書きました、そしてそれは非常に遅いようです。以下のコードは、自分のマシンにローカルでロードするのに約2〜4秒かかります。何が遅延を引き起こしているのか疑問に思います。教えてください、ありがとう！

function slideshow(){
    $("#1").animate({top: "50px",}, 500).delay(2000);
    $("#1").animate({top: "400px",}, 500);
    $("#2").animate({top: "50px",}, 500).delay(2000);
    $("#2").animate({top: "400px",}, 500);
    $("#3").animate({top: "50px",}, 500).delay(2000);
    $("#3").animate({top: "400px",}, 500);
    $("#4").animate({top: "50px",}, 500).delay(2000);
    $("#4").animate({top: "400px",}, 500);
    $("#5").animate({top: "50px",}, 500).delay(2000);
    $("#5").animate({top: "400px",}, 500);
    slideshow();
}

各IDは異なる画像を表します。

4

5 に答える 5

7

あなたのコードの大きな問題は、他の答えのどれもまだそれについて話していなかったように見えるので、最後の行がslideshow()それ自体を再帰的に呼び出すことであり、それはスタックオーバーフローにつながるでしょう。これを行わないでください：

function slideshow() {
   // animate code
   slideshow();
}

代わりに、繰り返し実行する場合は、 xミリ秒後にsetTimeout()関数の別の実行をキューに入れるために使用します。

function slideshow() {
   // animate code
   setTimeout(slideshow, 3500);
}

あなたがそれを持っていたように、どの機能も実際に終了することはありません。を使用setTimeout()すると、の各呼び出しslideshow()が終了し、指定された遅延の後に個別の呼び出しが実行されます。現在のアニメーションが終了した後に次の呼び出しが発生するように、遅延を十分に大きくします。そうしないと、実行されるよりも速く、より多くのアニメーションをキューに入れることになります。

更新： jQueryは、要素ごとに個別のアニメーションキューを維持します。つまり、5つの要素のアニメーションが同時に実行されます。他の回答のいくつかは、アニメーションを一度に1つずつ順番に実行する方法をすでに提供していますが、これが私が行う方法です。

$(window).on("load",function() {    
    // cache a jQuery object containing the elements to animate
    // (note you don't need their ids if you use their class)
    var $imgs = $('img.slideshow-image'),
        i = 0;

    function slideShow() {
       // start animation for "current" img
       $imgs.eq(i).show(1)
                  .animate({top: "50px",}, 500)
                  .delay(2000)
                  .animate({top: "400px",}, 500)
                  .hide(1, function() {
                     i = (i+1) % $imgs.length;
                     setTimeout(slideShow, 500);
                  });
    }    
    slideShow();    
});

作業デモ： http： //jsfiddle.net/bARwb/

  • インライン属性の必要性を排除するためと、コードをグローバルスコープから除外するための便利な方法として、コードをロードハンドラーでラップしました（この方法で行う場合は、bodyタグからonload=削除することを忘れないでください）。 onload="slideShow()"）。
  • 追加.show()して.hide()呼び出し（アニメーションキューに参加するように期間を指定して）、アニメーションのdisplay:none間にimg要素が含まれるようにします。そうしないと、position:relativeスタイルでは最初の要素しか表示されないためです（ただし、に変更すると、アニメーションのposition:absolute取得が妨げられます）親によってトリミングされますoverflow:hidden）。
  • 要素のアニメーションが終了すると、コールバックは.hide()増分iして次の要素のインデックスを参照し（ただし、最後の要素を通過するタイミングをチェックします）、次にsetTimeout()その次の要素のアニメーションをキューに入れるために使用します。
于 2012-06-20T00:44:50.117 に答える
2

そこにはいくつかの重複があり、いくつかの誤った仮定もあります。

jQueryを呼び出す.animateときに、アニメーションの完了時に呼び出されるコールバックを指定できます。これはあなたの「次のステップ」を置く場所です。

したがって、この例では：

  • 画像をアニメーション化する
  • 完了したら、2秒待ちます
  • 2秒後、画像をアニメーション化します
  • 完了したら、次の画像で関数を呼び出します

これはそれがどのように見えるかです

var images = ['#1', '#2', '#3', '#4', '#5'];

function slideshow(index){
    if (index >= images.length) {
        index = 0;
    }
    var image = images[index];
    $(image).animate({top: "50px",}, 500, function () {
        window.setTimeout(function () {
            $(image).animate({top: "400px",}, 500, function () {
                slideshow(index + 1);
            });
        }, 2000);
    });
}
于 2012-06-20T00:32:58.807 に答える
0

あなたはこのようなことを試すことができます：

var intervalValue = setInterval( "slideshow()", 2000 );
var slideshow_imageindex = 1;

function slideshow()
{
  //check if imageindex is greater than the number of images available (5 is an example)
  if (slideshow_imageindex > 5)
  {
    slideshow_imageindex = 1;
  }
  //hide image below, change image src, then move image so that it is visible again
  $("#1").animate({top: "400px",}, 500).attr('src','img/Slideshow-Audio-Trsfr'+slideshow_imageindex+'.png').animate({top: "50px",}, 500);
  //increase image index
  slideshow_imageindex++;
}

必要な画像は1つだけです（「id =＃1」の画像を保持しました）。2秒ごとに画像が非表示になり、画像が変更されて再び表示されます。あなたがしなければならないことだけ：数だけが変わるように画像に名前を付けてください：

img/Slideshow-Audio-Trsfr1.png
img/Slideshow-Audio-Trsfr2.png
img/Slideshow-Audio-Trsfr3.png
img/Slideshow-Audio-Trsfr4.png
img/Slideshow-Audio-Trsfr5.png

次に、関数内の「if」内の画像の数を使用します。ここイタリアでは遅いです、私が何も忘れなかったことを願っています:)

于 2012-06-20T00:38:38.677 に答える
0

私の推測では、フレームを2秒（2000）に設定していると思います。50のようなより高速なものを試して、何が見えるかを確認してください。それがフレーム遅延なのか500なのかはわかりませんが、どちらかがフレーム変更の間に待機している時間を表している場合は、長すぎます。

于 2012-06-20T00:21:32.313 に答える
0

コードの意図的な遅延を除いて、読み込みが遅くなる原因となるものは何もありません。それはページの残りの部分かもしれません。JavaScriptのスライドショー機能を実行する前に、画像の大きさやダウンロードされている可能性のあるその他のファイルを確認します。

ちなみに、スライドショー関数内からスライドショーを呼び出すのはおかしいです。

于 2012-06-20T00:26:39.990 に答える