带有可变项目的无限旋转木马

Question

我正在尝试创建类似于这个的旋转木马组件，基本上这个实现就是我想要的，但它不能处理（或没有作为选项）的是其中包含可变项目数的幻灯片。

我所说的是：链接中提到的实现在每张幻灯片中有3个项目，如果最后一张幻灯片没有正好3个项目的话，它会用空项目填充这个插槽。这是一个让无限实现变得容易的好方法。

我试着修改它，如果只有一个插槽是空的，就用列表中的第一个项目来填充这个空插槽，如果两个插槽是空白的，就使用前两个项目，等等。但我偶然发现了一个问题，下一组幻灯片有完全不同的显示和逻辑，因此动画变得"有问题"——例如，回到"开始"第一张幻灯片会有第二张，如果最后一张幻灯片中只有一个插槽是空的，则第三个和第四个项目没有第一个项目。

我目前的"解决方法"是在每次重新定位时克隆、附加和预处理项目（单击控件按钮），但这是非常低效的（每次操作DOM和基于原始选择器缓存新的元素集可能会很昂贵），而且可能是"懒惰的出路"。

这个问题有什么聪明的解决办法吗？

Answer 1

好吧，我只是试着这样做，位置：绝对；单向

看起来工作不错，只需根据您的需要调整动画即可

这是我的逻辑

overflow:hidden; position:relative;

在集装箱上

所有元素获取

position:absolute;

除了显示的3个元素外，所有元素都被隐藏了，这3个元素的左侧位置被硬设置为它们的索引（从绘制元素）

left:(4+n*40)+"px"

我设置了一个带有当前元素索引的数组

无功电流=[0,1,2]；

在改变时，我只对这个数组内容加+3或-3，用一个模来限制在好的范围内

function getIndex(n)
{    if(n < 0) return nbelem+n;
     return n%nbelem;
}

util函数将获取当前数组，并为我提供带有新元素的新数组以显示

function getNewIndex(n)
{   var newIndex = [];
    for(c=0;c<3;c++)
        newIndex[c] = getIndex(current[c]+n);
    return newIndex;
}

在更改时，我使新的当前元素可见，并且它们的位置在容器限制的右侧或左侧，之后我将它们动画化到它们的新位置（左：（4+n*40）+"px"），并在隐藏之前将旧的显示元素动画化到容器限制的左侧或右侧

为了完成所有这些动画，我写了一个小的专用函数，showMeElems（newArray，animWay）

我只需要定义左键和右键点击就可以使用这个功能

$left.click(function(){
    showMeElems(getNewIndex(-3),"left");
});
$right.click(function(){
    showMeElems(getNewIndex(3),"right");
})

这是小提琴

祝好运