如何使用jQuery自定义<ul>轮播滑块动画？

Question

我正在努力构建一个没有插件的基于jQuery的小型轮播，但似乎无法使动画正常工作。这不应该自动旋转，而只能在用户单击“下一个”或“上一个”按钮时旋转。我可以使用的唯一方法是自动删除最后一个元素以在第一个元素之前替换它...这是在一秒钟内发生的，尽管连续，但根本没有动画。

这是我的HTML容器：

<div class="carousel-nav" clearfix">
  <img src="img/prev.png" id="prv-testimonial">
  <img src="img/next.png" id="nxt-testimonial">
</div>
<div id="carousel-wrap">
  <ul id="testimonial-list" class="clearfix">
    <li>
      <p class="context">Some testimonial goes right here[1]</p>
      <span class="creds">Tiffany LastName</span>
    </li>
    <li>
      <p class="context">"We could not be more pleased. A++ efforts!"</p>
      <span class="creds">Alan Goodwrench</span>
    </li>
    <li>
      <p class="context">"After just one purchase, we know this is the company to stick with."</p>
      <span class="creds">Butters Stotch</span>
    </li>
  </ul>
</div>

在＃传送带缠绕表现为固定在400像素视口（每个列表项也是400像素）。在＃证明书列表是动态jQuery中在400像素〜= 1600像素与一些边距/填充沿着调整基于项的总数...所以4个项目。这样可以使所有个人鉴定彼此相邻，因此它们应该从右侧/左侧进入动画。

这是我非常基本的jQuery，实际上它的性能不如我希望的那样：

$('#prv-testimonial').on('click', function(){
  var lastitm = $('#testimonial-list li:last').remove();
  $('#testimonial-list li:first').before(lastitm);
});

我只需要弄清两件事：

1. 当用户单击“下一步” /“上一步”按钮时，如何从右到左触发动画，反之亦然？

2. 动画结束后，如何确保轮播无限循环？如何获得“上一个”按钮，从第一个项目一直移动到最后一个项目，仍然保持连续性？

任何建议将不胜感激！

Answer 1

尝试一下：

$('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-400px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, 4000); });

$('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-400px' }, 4000, function() {
        $first.remove().css({ 'margin-left': '0px' });
        $('#testimonial-list li:last').after($first);
    });
});

我正在使用jquery .animate()函数为“ margin-left” css样式设置动画。下一步按钮会设置动画，然后将第一个元素移动到列表的末尾。“上一个”按钮将最后一个项目移到列表的前面，然后进行动画处理。

顺便说一句：值“ 4000”是动画的持续时间（以毫秒为单位）。

jsfiddle