2

次のような画像の無限のスライドショーを作成しようとしています:

  1. ウィンドウ全体で画像をスライドさせます
  2. 最後の画像に到達すると、画像の最初から開始します

これが私の現在のコードです：

var direction = '-';

function doScroll()
{
   $('#products ul').animate({left: direction + '500'}, 5000, function()
   {
      if (direction == '-')
      {
          $('#products li:first').before($('#products li:last'));
      }
      else
      {
         $('#products li:last').after($('#products li:first'));
      }
   });
}

$(document).ready(function()
{
   $('#products ul').css({'width': $('#products ul li').length * 185});

   plzscroll = setInterval("doScroll()", 1000);
});

setInterval() の理由は、無限のアニメーションを作成することです。

Firebug によると、UL は左に 500 ピクセルスクロールされてから停止します...ただし、LI は正常に移動します。最初の画像はスライドショーの最後に配置され、続きます。

私が必要とするのは、アニメーションが UL をスライドし続けない理由を理解することだけです。

4

2 に答える 2

2

現時点ではテスト ケースをセットアップできませんが、アニメーションは 5 秒かかるように設定されていますが、間隔は 1 秒後にトリガーされるため、要素を移動すると次のアニメーションが優先される可能性があります。また、おそらく左に が必要なため、毎回 -=500ではなく左に移動し続けます。-500

これを試して：

var direction = '-=';
function doScroll()
{
   $('#products ul').animate({left: direction + '500'}, 5000, function()
   {
      if (direction == '-=')
      {
          $('#products li:first').before($('#products li:last'));
      }
      else
      {
         $('#products li:last').after($('#products li:first'));
      }
      setTimeout(doScroll, 1000);
   });
}

$(function()
{
   $('#products ul').css({'width': $('#products ul li').length * 185});
   setTimeout(doScroll, 1000);
});

これにより、このアニメーションが終了してから 1 秒後に次のアニメーションがトリガーされます。

サイドノート: 使用しないようにしてくださいeval() これは、文字列を渡すsetTimeout()かsetInterval()、上記のように代わりに関数または無名関数を渡すことです。

于 2010-03-02T03:00:32.327 に答える
0

before() と after() を使用してアニメーションの dom を変更するのは珍しいことです。#products ul 要素の位置だけが変更されるように、メソッドを書き直そうとします。スムーズなスクロール効果を維持するには、リストの最初と最後の要素を複製する必要があることに注意してください。それとも、画像は動的にロードされていますか?

于 2010-03-02T03:08:37.673 に答える