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

Posted 2023-05-08

【中文标题】如何使用 jQuery 自定义动画 <ul> 轮播滑块？

【英文标题】：How To Custom Animate <ul> Carousel Slider with jQuery?

【发布时间】：2014-01-11 02:41:03

【问题描述】：

我正在努力构建一个没有插件的基于 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>

#carousel-wrap 表现为视口固定在 400 像素（每个列表项也是 400 像素）。 #testimonial-list 在 jQuery 中根据项目总数动态调整大小......所以 400px ~= 1600px 的 4 个项目以及一些边距/填充。这样可以使所有推荐书彼此相邻，因此它们应该从右侧/左侧动画到视图中。

这是我非常基本的 jQuery，老实说，它的性能并没有我希望的那么好：

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

我只需要弄清楚两件事：

当用户点击下一个/上一个按钮时，我如何触发从右到左或反之亦然的动画？

动画结束后，如何确保轮播无限循环？如何让“prev”按钮从第一项一直移动到最后一项并且仍然保持连续性？

任何建议都将不胜感激！

【参考方案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 样式设置动画。 Next 按钮动画，然后将第一个元素移动到列表的末尾。上一个按钮将最后一项移动到列表的前面，然后进行动画处理。

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

jsfiddle

【讨论】：

哦，这是一个很棒的解决方案，也感谢您的提琴。