无限循环水平滑动div

Question

我一直在尝试用无限循环编写自己的carousal。除了一个例外，代码工作得很好。我想让它进入循环，第一个 div 被附加到最后一个等等。现在它被重置到以前的位置。

我尝试了不同的方法，但 none 似乎有效。有什么帮助吗？

let divArray = $(".mybox");
let sliderFrame = $(".slider");
let i = 0;

function test() {
  //sliderFrame.append(divArray[i]);
  sliderFrame.delay(1000).animate({ right: 150 * i + "px" });
  if (i < divArray.length/2) i++;
  else i = 0;
  test();
}
test();

https://codepen.io/xblack/pen/mLYdeb

Answer 1

您可能想试试这个 --

let sliderFrame = $(".slider");
let i = 0;

function test() {
  let divArray = $(".mybox");
  $(divArray[0]) 
    .animate({"margin-left":"-150px"}, 5000, function() {
    $(this)
      .css({"width":"150px","margin-left":"0px"})
      .appendTo(sliderFrame);
    test();
  });
}
test();