2


私は最初のjqueryコードを書いていますが、php関数を介して画像を取得し、装飾を加えた順序で画像を表示するランダムスライダーを作成する必要があります。ランダムなことはphpで行われます。私のjqueryは次のとおりです。

function bannerSlide(){
     $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      $.each(images, function (index, value) {
        $('#banner').slideUp(500).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
    });

    }
  });
}

画像をimages配列で取得し、ループします。私が直面している問題は、このコードが配列の最後の画像のみを表示することです。他の画像は表示されず、配列の最後の画像をスライドし続けます。しかし、関数alert内にステートメントを入れる$.eachと、アラートボックスの[OK]をクリックすると画像が変化します。

どんな助けでも大歓迎です。
すでに構築されているスライダーの使用を提案しないでください。

4

3 に答える 3

2

ループはeachマイクロ秒単位で実行され、コードを使用する各パスですぐにcss値が設定されます。したがって、最後の画像のみが表示されます

setTimeoutこれは、最初のアニメーションのコールバック内でcssを使用および変更して、適切な時間にのみcssが変更されるようにするソリューションです。タイムアウト間隔を調整する必要がある場合がありますindex*3000

$.each(images, function(index, value) {
    setTimeout(function() {
        $('#banner').slideUp(500, function() {
            /* use callback of animation to change element properties */
            $(this).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        })
    }, index * 3000);
});

要素のテキスト変更を使用したデモ http://jsfiddle.net/RrPu6/

于 2012-10-20T12:17:09.717 に答える
2

次のコードは、投稿された問題の解決策です。

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(imgs) {
      var cnt = imgs.length;
        $(function() {
            setInterval(Slider, 3000);
        });
        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', 'ItemPictures/'+imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
    }
  });
}

imageSlide'banner''div'内のimgタグのIDはどこにありますか

于 2012-10-20T12:18:27.230 に答える
1

問題は、画像の配列を反復処理しており、各画像に対して同じDOM要素の背景を設定していることです$('#banner')。これは非常に高速に行われるため、反復の最後に最後の画像のみが表示されます。alert()の間に実行が一時停止されるため、その間に変更が表示されるのもこのためですalert()。

背景の変更を遅らせる方法を考え出す必要があります。試すことができることの1つは、の前にdelay（）を追加することですslideUp()。何かのようなもの：

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      var duration = 2000;
      var element = $('#banner');
      $.each(images, function (index, value) {
        element.delay(index * duration).slideUp(500).delay(duration).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        initialDelay += duration;
    });

    }
  });
}

それは醜いハックですが、それがすでに構築されたスライダーが存在する理由です:)

于 2012-10-20T01:37:25.350 に答える