4

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

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

它应该像这样工作：

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

我创建了以下功能：

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();}});
}

现在它的工作方式如下：第一个图像正确动画，然后所有下一个图像都不会滚动（动画不起作用），但是在1000ms 时间之后，第一个图像被移动到最后。所以实际上图像正在改变，但动画不起作用。

我想scroll()最后的函数被调用得太早了，但是如何正确链接呢？

4

1 回答 1

4

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

JSFiddle

您错过定位图像本身的唯一区别。

 jQuery('.images img:first-child')
于 2013-08-25T17:18:23.667 回答