非宽度特定的jquery旋转木马

Question

我正在尝试使这个jquery轮播以不同的宽度工作。现在，在重复之前，最后会有一堆空白区域。

如何清除最后的空白区域？

这是我的jsfiddle。

http://jsfiddle.net/A4sZb/

Answer 1

出错了什么

轮播通过显示图标的水平列表来工作。当旋转图标时，轮播只是使用CSS左右移动列表。最后发生的空白是因为你的所有列表元素都在左边。然后，当您再次单击“下一步”时，所有元素都会移回最右侧。

如何解决

像Dutchie432说的那样，你需要重新附加屏幕外的项目。从一开始就采用一个元素并使它再次显示在最后的功能并不是你可以用CSS修改做的事情;你需要编写一些JavaScript / jQuery代码来实际修改DOM。

示例实施

使用jQuery，您可以使用:first或:last选择器选择列表中的第一个或最后一个项目。当用户单击“下一步”时，选择第一个列表元素，将其删除，然后将其附加到轮播列表的末尾。像这样循环列表元素必须在完成动画移位后进行。显然，在移动它之前，您需要某种方法来检查第一个/最后一个项目是否不再可见。此外，您需要确保删除第一个项目并将其放在最后，然后移动列表元素以补偿丢失的图像宽度。