Question

我创建了一个功能，可以在我网站的标题中水平滚动多个图像。所以在我的标题内我有类似的代码：

<div class='images'> <!-- this div is 150% wide with overflow hidden -->
     <img src=... /><img src=... /><img src=... /><img src=... />
</div>

它应该像那样工作：

获取第一张图片，使用动画将其滚动到左侧的视野之外（使用它的margin-left属性）
将第一张图片移动到最后（实际上它会移除图片并在最后创建一张新图片。）
重新启动整个过程。

我创建了以下功能：

function scroll()
{
    var o = jQuery('.images').children().first();
    var w = o.css('width');
    var s = o.attr('src');
    jQuery('.images:first-child').animate({'margin-left': "-"+w}, {'duration': 1000, 'complete': function(){
        jQuery('.images').children().first().remove();
        jQuery('.images').append("<img src='"+s+"' />");
        scroll();}});
}

现在它按以下方式工作：第一个图像正确动画，然后所有下一个图像都不滚动（动画不起作用），但在1000毫秒之后第一个图像被移动到最后。事实上，图像正在发生变化，但动画无效。

我认为最后调用scroll()函数的时间过早，但如何正确链接？

Answer 1

所以如果我没弄错的话，这就是你想要做的事情：

JSFiddle

唯一的区别是你错过了定位图像。

 jQuery('.images img:first-child')

jQuery中的递归动画无法正常工作

1 个答案: