jQuery在LIs中滑动

Question

我有一个从屏幕上流出的LId列表，我想这样当我点击上一个和下一个按钮时，幻灯片就会沿着被点击的方向移动。我更希望它循环，如果可能的话，我想远离插件。

我知道我需要marginLeft来增加它的值，但是我不确定如何做到这一点。任何帮助都将不胜感激。谢谢!

<ul>
   <li class="first selected team_one"></li>
   <li class="team_two"></li>
   <li class="team_three"></li>
   <li class="team_four"></li>
   <li class="last team_five"></li>
</ul>

$('.team .next').click(function(){
   $('.team ul li.first').animate({ marginLeft: '-157px' });
});

$('.team .prev').click(function(){              
   $('.team ul li.first').animate({ marginLeft: '0' });
}); 

Answer 1

好吧，这个想法是一个元素列表，一个接一个，在一个带有overflow:hidden的div中。然后您只需动画左侧，或页边距等，使其转到下一张图片，我使用的是css3过渡动画的移动。

你可以用几秒的setTimeout()来做一个函数，在里面你递增setTimeout或left (就像pmandell的注释)，在递增之后，你可以再次调用你的函数，你可以在顶部放一条if语句，比如if left或margin高于x then，而不是递增，你可以再次设置初始值。您还可以定义一个布尔值，并在该布尔值发生变化时停止动画，例如计数器或类似的东西。

希望能对你有所帮助。