Question

我试图制作一个图像轮播/滑块，它可以自动滚动并使用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/

我尝试将其添加到本地开发站点（用图像替换文本和彩色背景），它似乎很好用。但是，我想制作一个向右而不是向左滚动的版本，但是还没有能够弄明白。我试过改变＆＃34; .append＆＃34;到＆＃34; .prepend＆＃34;并且利用保证金变化，但到目前为止没有运气。

有什么建议吗？

Answer 1

我分叉并重新调整你的JSFiddle，使其从左向右滚动。请在此处查看：https://jsfiddle.net/1jw8xpqe/

必须改变一些事情才能让它发挥作用。首先，解析列表以反转幻灯片的顺序并移动它们中的一些，以便最左边的一个是＆＃34;项目＃1＆＃34;当滑块初始化时：

// 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轮播向右滚动而不是向左滚动？

1 个答案: