Jquery幻灯片中的列表，连接第一个和最后一个列表元素以创建旋转木马

Jquery list in slideshow that connects first and last list element to create a carousel?

本文关键字：最后一个 列表元素 旋转木马 创建 第一个 连接 幻灯片 列表 Jquery      更新时间：2023-09-26

我有三个列表元素，当您单击向左或向右箭头时，它们应该滑入和滑出容器。我希望这些列表元素被包装起来，这样当你到达最后一个列表元素时，你就可以回到第一个列表元素。基本上是旋转木马效果。我不想使用插件。

此代码将滑动元素。但是，该列表不会自动换行。小提琴在这里。。。http://jsfiddle.net/defmetalhead/A23g9/9/

$('#rightArrow').on('click', function () {
  var end = $(".upComingTiles li").length;
  $(".upComingTiles li").animate({ 'left': '-=310px' }, 1000)
});

这段代码也按照我想要的方式工作，但是列表一次只会移动一个列表元素。这是小提琴。。。http://jsfiddle.net/defmetalhead/3YM8G/

$('#rightArrow').on('click', function () {
  var end = $(".upComingTiles li").length;
  $(".upComingTiles").animate({ 'left': '-=310px' }, 'slow', function () {
    $(".upComingTiles li:first").insertAfter(".upComingTiles li:last")
  });
});

您可以使用li:lt（3）选择前三个li，并将它们插入最后一个li之后。

$(".upComingTiles li:lt(3)").insertAfter(".upComingTiles li:last")

这是小提琴的链接。

http://api.jquery.com/lt-selector/

相关文章：