0

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

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

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

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

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

4

1 回答 1

0

好的，我只是尝试这样做，位置：绝对；方法

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

这是我的逻辑

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

这是小提琴

祝你好运

于 2013-02-20T13:27:18.400 回答