Question

我正在尝试按照以下方式创建无尽的图像幻灯片：

在窗口中滑动图像
到达最后一张图像时，它从图像的开头

这是我目前的代码：

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()的方式，传递函数或匿名函数，就像我上面一样。

Answer 2

使用before（）和after（）修改动画中的dom是不常见的。我会尝试重写该方法，以便唯一改变的是#products ul元素的位置。请注意，要保持平滑滚动效果，您必须复制列表中的第一个和最后一个元素。或者是动态加载图像？

jQuery - 尝试创建一个“无尽幻灯片”的图像

2 个答案: