2

最終的には、画像をフェードインおよびフェードアウトする時間指定のスライドショーを作成しようとしています。私が理解できないのは、$。each関数が配列の各インデックスのループを完了し、代わりに最後の画像を7回だけループする理由です。

これが私のコードです...

<script>
$(document).ready(function(){
    var image1 = "<img width='600' height='400' src='images/image1.jpg' />";
    var image2 = "<img width='600' height='400' src='images/image2.jpg' />";
    var image3 = "<img width='600' height='400' src='images/image3.jpg' />";
    var image4 = "<img width='600' height='400' src='images/image4.jpg' />";
    var image5 = "<img width='600' height='400' src='images/image5.jpg' />";
    var image6 = "<img width='600' height='400' src='images/image6.jpg' />";
    var image7 = "<img width='600' height='400' src='images/image7.jpg' />";
    var image8 = "<img width='600' height='400' src='images/image8.jpg' />";

    var imageArray = new Array(image1, image2, image3, image4, image5, image6, image7, image8);
    $.each(imageArray, function(key, value){
        $('#slide').html(value);
        $('#slide').hide().fadeIn('slow').fadeOut('slow');
    });
});
</script>

繰り返しになりますが、最終的に発生するのは、最後の画像が消える前に7回フェードインおよびフェードアウトすることです。よろしくお願いします。

4

6 に答える 6

2

これは、ループがアニメーションの完了を待たないためです。すべてのアニメーションコマンドを次々にキューに入れます。したがって、アニメーションがいつ完了したかを確認するためのコールバックを提供してから、（ループを続行して）画像を変更することをお勧めします。
そうでなければ、ティロが提案したようにやらなきゃ

于 2012-06-18T09:55:34.347 に答える
2

あなたの問題は、JavaScriptの実行が一時停止せず、実行していることだと思いfadeInますfadeOut。

あなたの each呼び出しはこれを行います：

  1. のHTMLを#slideに設定しますimage1。
  2. を非表示にし#slideます。
  3. でフェードインを開始し#slideます。
  4. のHTMLをすぐにに設定#slideしimage2（終了を待たないためfadeIn）、を上書きしますimage1。
  5. #slide再びフェードインを開始します。

等々。

必要な結果を得るには、呼び出しの代わりに再帰関数（つまり、それ自体を呼び出す関数）が必要になりますeach。この関数は、コールバック関数をfadeInとに渡す必要がありますfadeOut—これらの関数は、実行が終了したときfadeInに呼び出されます。fadeOut

例えば

function fadeImagesInAndOut(imageArray, imageIndex) {
    $('#slide').html( imageArray(imageIndex) );

    $('#slide').hide().fadeIn('slow', function () {

        $('#slide').fadeOut('slow', function () {

            if (imageIndex < imageArray.length) {
                fadeImagesInAndOut(imageArray, imageIndex + 1);
            }
        });
    });
}

fadeImagesInAndOut(imageArray, 0);
于 2012-06-18T10:03:55.070 に答える
1

アニメーションは非同期で実行されます。コードでコマンドを実行する順序は次のとおりです。

  1. $('#slide').html1枚目の画像に設定します。
  2. jQueryにオブジェクトのアニメーションを開始するように依頼します。アニメーションはまだ開始されていません。
  3. $('#slide').html2番目の画像に設定します。
  4. 別のアニメーションを要求します。
  5. ..。
  6. 前回はアニメーションをお願いします。
  7. 関数が完了しました。ブラウザはページの再描画を開始し、タイムアウトイベントを発生させます。コンテナは非表示になっています。そのhtmlは最後の画像を参照しています。
  8. jQueryはコンテナをアニメーション化します。

アニメーションが終了した後にのみ、コンテナのhtmlを変更する必要があります。次に例を示します。

$(document).ready(function(){
  //populate imageArray 
  function animate_one(index) {
    if (index >= imageArray.length) return;
    $('#slide').html(imageArray[index]);
    $('#slide').hide().fadeIn('slow').fadeOut('slow', function() {
      animate_one(index+1);
    });
  }
  animate_one(0);
});

フィドル

于 2012-06-18T09:59:38.703 に答える
1

$（'＃slide'）htmlを8回設定し、毎回書き換えます。おそらくあなたはそれに各画像を追加するつもりですか？

$('#slide').append( $(value) );

また、＃slideでhide（）を8回呼び出しています。これはあなたが意図していることですか？

編集：テストされていませんが、コールバックの使用方法のアイデアを提供します

var imgArray = new Array(...)

var doAnimate = function(key){
   if(!value = imgArray[key]) return;
   $('#slide').html(value);
   $('#slide').hide().fadeIn('slow').fadeOut('slow', function(){
       doAnimate(key++);
   });
}

doAnimate(0);
于 2012-06-18T09:52:38.690 に答える
1

非同期実行の魔法。

イベントの時系列：

    $('#slide').html(image1);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image2);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later
    $('#slide').html(image3);
    $('#slide').hide();
    #   fadeIn('slow').fadeOut('slow'); will happen some time later

ループは2回目（および3回目など）の反復に入り、最初のアニメーションが終了する前に、最後の反復になるまで画像をリセットします。

于 2012-06-18T09:54:12.233 に答える
0

それを行う方法（素晴らしいフェード効果付き）：

jsBinデモ

配列をループして新しい画像をDIVに追加するのではなく、1つの画像をDIV内に配置します。:lastセレクターを使用して古い画像をフェードアウト（および削除）します。

var images = ['image1.jpg','image2.jpg','image3.jpg'];       // your images
                                                              
var c = 0;                                                   // set the first image
$('#slide').prepend( '<img src="'+ images[c] +'" />' );      // prepend one

function loop(){ 
    $('#slide').prepend( '<img src="'+ images[c++ % images.length] +'" />' );    
       $('#slide img:last').delay(1000).fadeTo(700,0,function(){
            $(this).remove();                                // remove last one
            loop();
       });  
}
loop();

cssで、画像が完全に配置されていることを確認してください。

于 2012-06-18T10:26:29.537 に答える