自定义无限水平循环Div轮播（Carousel）异常，求解决方案

你的轮播现在遇到的核心问题是：当循环到末尾时，直接重置偏移量回到初始位置，导致视觉上的跳变，没有实现「首个元素移到末尾」的无缝过渡。我来帮你分析问题并给出修复方案：

问题根源 #

你当前的代码通过修改sliderFrame的right属性实现滑动，但当i达到divArray.length/2时直接重置为0，这会让right值从150*(length/2)突然跳回0，自然就出现了「重置回初始位置」的现象，完全没有利用DOM移动来实现无缝衔接。

修复思路 #

要实现无缝循环，我们需要在轮播到最后一个元素时：

• 把第一个元素移动到容器的末尾，让元素序列保持连续
• 瞬间调整容器的偏移量，抵消掉元素移动带来的位置变化，让视觉上完全看不出断层
• 继续递增索引，保持动画的连续性

修改后的代码 #

let divArray = $(".mybox"); 
let sliderFrame = $(".slider"); 
let i = 0; 
const itemWidth = 150; // 统一元素宽度，方便维护

function test() {
  // 执行滑动动画，在动画完成后处理无缝逻辑
  sliderFrame.delay(1000).animate({ right: itemWidth * i + "px" }, function() {
    // 检查是否滑动到了最后一个元素
    if (i >= divArray.length - 1) {
      // 把第一个元素移到容器末尾
      sliderFrame.append(divArray.eq(0));
      // 瞬间调整right值：因为移走了第一个元素，容器整体相当于左移了一个宽度，所以right要减去itemWidth
      sliderFrame.css("right", `${itemWidth * (i - 1)}px`);
      // 更新元素数组，因为DOM结构已经改变
      divArray = $(".mybox");
      // 索引减1，保证下一次滑动的偏移量正确
      i--;
    }
    // 索引递增，继续下一次滑动
    i++;
    // 递归调用保持轮播
    test();
  });
}
test();

关键细节说明 #

• 动画回调的使用：我们把DOM调整逻辑放在动画完成的回调里，确保只有当前滑动完成后，才进行无缝衔接的操作
• DOM移动与偏移调整同步：移动第一个元素到末尾后，立刻修改right值，这个操作是瞬间完成的，用户完全感知不到
• 更新元素数组：因为DOM结构已经变化，必须重新获取.mybox元素的集合，避免后续操作出错

另外需要确保你的CSS结构正确：

• .slider需要设置position: relative; overflow: hidden;，保证内部元素滑动时只显示可视区域
• .mybox需要设置float: left; width: 150px;（或者使用flex布局），确保元素横向排列

内容的提问来源于stack exchange，提问作者Greyfrog