求助：基于jQuery实现带延迟的无限循环轮播（动态修改内联样式）

嘿，我看了你写的代码，问题出在几个关键地方，咱们一步步把它搞定：

原代码的核心问题 #

• $.each是同步遍历，会瞬间把所有left值依次设置一遍，根本等不到你设置的time延迟，所以你看不到任何轮播效果，最后只会停在最后一个位置
• 你试图修改time变量，但这完全没用，因为没有用定时器来控制执行间隔
• 没有处理无限循环的逻辑，遍历完数组就直接停了

完整解决方案 #

首先得补上CSS过渡效果，不然修改left只会生硬跳转，没有平滑动画：

CSS 部分 #

/* 外层容器设置overflow:hidden，只显示单张幻灯片 */
.testimonials-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* 幻灯片容器开启绝对定位，加上transition实现平滑过渡 */
.testimonials {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%; /* 4张幻灯片对应400%宽度，N张就设为N*100% */
  margin: 0;
  padding: 0;
  list-style: none;
  transition: left 0.5s ease; /* 过渡时长可自行调整 */
}

/* 每张幻灯片占满容器宽度 */
.testimonials li {
  float: left;
  width: 25%; /* 4张对应25%，N张就设为100%/N */
}

HTML 调整（给轮播加外层容器） #

<div class="testimonials-container">
  <ul class="testimonials" style="left:0">
    <li>We love them. They are super duper.</li>
    <li>They make me feel magical. Like a flying badger.</li>
    <li>At one point they held my organ.</li>
    <li>Cor blimey, what a service they provide.</li>
  </ul>
</div>

jQuery 代码（修复逻辑，实现无限循环） #

function initSlideshow() {
  var $slider = $('.testimonials');
  var slideCount = $slider.children('li').length;
  // 动态生成位置数组，不用硬编码，后续加幻灯片不用改JS
  var positions = [];
  for (var i = 0; i < slideCount; i++) {
    positions.push('-' + (i * 100) + '%');
  }
  
  var currentIndex = 0;
  var intervalTime = 2000; // 每张幻灯片停留2秒
  
  // 用定时器控制轮播间隔
  setInterval(function() {
    // 设置当前幻灯片的left定位
    $slider.css('left', positions[currentIndex]);
    // 索引递增，到最后一张后回到0，实现无限循环
    currentIndex = (currentIndex + 1) % slideCount;
  }, intervalTime);
}

// 页面加载完成后初始化轮播
$(document).ready(function() {
  initSlideshow();
});

代码逻辑说明 #

1. 动态生成位置数组：根据幻灯片数量自动计算每个位置的left值，后续新增幻灯片无需手动修改数组
2. 定时器控制切换：用setInterval每隔指定时间执行一次切换逻辑，替代原有的同步遍历
3. 无限循环实现：通过(currentIndex + 1) % slideCount取模运算，当索引走到最后一位时自动回到0，完美实现循环
4. CSS过渡动画：依赖transition属性，修改left值时自动触发平滑动画，不用JS额外控制动画过程

这样就能实现你想要的超轻量级无限轮播了，逻辑简单易懂，后续维护也方便~

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