Question

我正在使用EasySlider，但与我发现的这个插件的任何示例不同，我在任何时候都会显示多个元素，宽度为100％。单独的图像组成一个完整的，长的连续图像，这是Photoshop，所以即使第一个和最后一个之间的边界看起来很自然。它被配置为自动连续幻灯片。

在插件中有以下代码：

if(options.continuous){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
};

我的问题是只有第一个元素在最后一个元素之后被克隆，所以在这个滑块的第二次旋转时，只显示第一个元素，直到它到达最左边，然后其他图像显示为“弹出” “in。（类似：[EXAMPLE]，如果你想象，并且展览场地右边的所有图像都没有出现，直到展览场地到达最左边）。

有没有更好的方法来管理元素的克隆，以便克隆所有图像？或者也许有人能想出更好的方法？我是JQuery的新手

注意：我正在尝试创建一个操作，当一个元素离开屏幕在左边时，它被放回到右边。有没有办法最终实现这个目标？

Answer 1

我想你可能想考虑一个不同的插件。如果您更改了插件，更新将需要重新应用您的补丁。

我建议 http://www.gmarwaha.com/jquery/jcarousellite/ 要么 http://sorgalla.com/jcarousel/

这些都支持你所说的。

Answer 2

我同意troynt，在这种情况下，最好使用符合您要求的东西。

我只是制作了一个简单的“插件”，它只是做什么，你需要什么，也许它对你有用。

http://jsfiddle.net/doktormolle/4c5tt/

您可以设置延迟和持续时间，并选择在悬停时暂停。

Answer 3

鉴于您的滚动条中有一个项目列表，如下所示：

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

假设每次你推进滚动条，第一个li移出屏幕，你可以不断地从列表前面挑出第一个li并将其追回到最后每次单击“下一步”按钮或滚动事件。如果您正在使用jQuery＆gt; = 1.4，则可以使用detach()方法执行此操作，该方法将从DOM中删除该元素，但保留其所有相关数据，以便您以后可以轻松地重新附加它：

$('ul li:first').detach().appendTo('ul');

Answer 4

不知道，如果我以正确的方式解读它，你可以试试这个：

  //at first run add a class "init" to the inital li-elements,
  //so that later only them will be cloned 
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');

  //prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));

在JQuery中克隆li元素

4 个答案: