如何让这个 jQuery 轮播向右滚动而不是向左滚动？

Question

我正在尝试制作一张图像 carousel/slider，它可以自动平滑滚动并使用 jQuery 循环播放。这是我正在使用的函数：

function spinCarousel() {  
  $("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function () {
    $("ul li:first-child").appendTo('ul');
    $("ul li:last-child").css('margin-Left', 0);
    spinCarousel();
  });
}

这里有一个例子：https://jsfiddle.net/T_Recks/aa43n7g0/

我尝试将它添加到本地开发站点（用图像替换文本和彩色背景），它似乎运行良好。但是，我想制作一个向右滚动而不是向左滚动的版本，但一直无法弄清楚。我试过将“.append”更改为“.prepend”并尝试更改边距，但到目前为止运气不佳。

有什么建议吗？

Answer 1

我分叉并重组了您的 JSFiddle，使其从左向右滚动。在这里查看：https://jsfiddle.net/1jw8xpqe/

必须更改一些内容才能使其正常运行。首先，解析列表以反转幻灯片的顺序并移动其中的几个，因此最左边的是 "Item #1" 当滑块初始化时：

// reverse items
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());

//  rearrange last two items so first slide starts on left 
list.prepend($('ul li:last-child').prev('li').andSelf());

然后一些 CSS/JS 调整：幻灯片将第一个 li 从 -200px（在 CSS 中定义）动画化到 0，然后每个循环，将 ul 的最后一项添加到 -200px 的开头。希望这对您有所帮助！

如何让这个 jQuery 轮播向右滚动而不是向左滚动？

How can I make this jQuery carousel scroll right instead of left?

javascript

jquery

jquery-animate