带有可变项目的无限轮播答案

【问题标题】：Infinite carousel with variable items带有可变项目的无限轮播
【发布时间】：2013-03-06 21:05:55
【问题描述】：

我正在尝试创建类似于this one 的轮播组件，基本上这个实现是我正在寻找的，但它不能处理（或没有作为选项）是带有变量的幻灯片其中的项目数。

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

我尝试修改它以在只有一个插槽为空时用列表中的第一项填充该空插槽，如果两个插槽为空则前两个项目等，但我偶然发现了下一组幻灯片具有完全不同显示的问题和逻辑，因此动画变得“有问题”——例如如果最后一张幻灯片中只有一个插槽是空的，则返回“开始”第一张幻灯片将有第二、第三和第四项没有第一项。

我当前的“workaraound”是在每次重新定位（单击控件按钮）时克隆、附加和前置项目，但这非常不高效（每次操作 DOM 并基于原始选择器缓存一组新元素可能代价高昂) 并且可能是“懒惰的出路”。

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

【问题讨论】：

【解决方案1】：

好的，我只是尝试这样做，使用 position:absolute;方式

似乎工作正常，只需根据您的需要调整动画

这是我的逻辑

overflow:hidden; position:relative;

在容器上

获取所有元素

position:absolute;

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

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

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

var current = [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;
}

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

为了制作所有这些动画，我编写了一个很小的专用函数，showMeElems(newArray,animWay)

我只需要定义左右点击即可使用此功能

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

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

这里是fiddle

祝你好运

【讨论】：