javascript - 使用动画一次滑动超过 1 个 img

Question

我想为合作伙伴 Logo 创建 slider 。我有一个正在移动一个元素的脚本。如何收集所有图像并一次移动所有图像？

脚本:

$(document).ready(function(){
   var w = $("#partners").width();
   $(".img").css({left: w-50});
   var f = function(){
      $(".img").animate({left: 0},5000,function(){
         $(".img").css({left: w-50});
         f();
      });
   };
   f();
});

我的 img 移动到文档末尾并且 f() 再次调用(类似于循环)。我需要用不止一张图片来完成。

Answer 1

jsFiddle Demo

您正在使用的代码设置为在一个类上工作。因此，只需使用该类标记其他元素即可为多个元素设置动画。这是一个简单的示例(已更新以步进动画):

html

<div id="partners" style="width:50px;"></div>
<div class="img">Me</div>
<div class="img">Mini Me</div>
<div class="img">Mini Me Me</div>
<div class="img">Mini Me Me Me</div>

CSS

.img{
    position:relative;
}

js - 为了步进动画，跟踪索引并按长度修改它以确保它环绕(在本例中为 i)

var w = $("#partners").width();
$(".img").css({left: w-50});
var f = function(i){
  i = i % $(".img").length;
  $(".img").eq(i).animate({left: 0},750,function(){
     $(".img").eq(i).css({left: w-50});
     f(i+1);
  });
};
f(0);