jQuery - 尝试创建 'endless slideshow' 的图像

Question

我正在尝试创建一个无休止的图像幻灯片，其功能如下:

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 向左滚动 500px，然后停止...但是，LI 成功移动了。第一张图像被放置在幻灯片的末尾并继续。

我需要的只是弄清楚为什么动画不继续滑动 UL。

Answer 1

我目前无法设置测试用例，但由于您的动画设置为 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() 的作用，像我上面那样传递一个函数或匿名函数。