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

It is unusal that you are modifying the dom in your animation with before() and after(). I would try to rewrite the method so that the only thing that changes is the position of the #products ul element. Note that to maintain the smooth scrolling effect you would have to duplicate the first and last elements in your list. Or are the images being loaded dynamically?

于 2010-03-02T03:08:37.673 回答