Question

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

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

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

我当前的“workaraound”是在每次重新定位时克隆，附加和预先添加项目（单击控件按钮），但这非常高性能（每次操作DOM并基于原始选择器缓存新的元素集可能成本高昂））并且可能是“懒惰的出路”。

这个问题有什么聪明的解决方案吗？

Answer 1

好吧，我只是尝试这样做，位置：绝对;方式

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

这是我的逻辑

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;
}

在变化时，我可以看到新的当前元素以及它们在容器限制的右侧或左侧的位置，之后我将它们设置为新的位置（左：（4 + n * 40）+“px”）并且在隐藏它们之前，将旧的显示元素设置为左侧或右侧容器限制

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

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

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

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

祝你好运