JavaScript循环图片轮播自动播放异常：需首显3张后逐张滑动

问题分析 #

1. 原代码索引判断逻辑错误：用prevIndex === images.length作为重置条件，但图片数组的最大索引是images.length - 1，导致索引越界后直接跳回0，不符合逐张滑动的需求。
2. 未清理定时器：useEffect中未清除setTimeout，组件重复渲染或卸载时会残留定时器，引发异常。
3. 单索引逻辑无法适配“显示3张图片”的需求：需要基于起始索引计算当前显示的三张图片范围，而非仅控制单张图片的位置。

解决方案代码 #

const images = [
  { id: 1, src: Image1, title: "foo", description: "bar" },
  { id: 2, src: Image2, title: "foo", description: "bar" },
  { id: 3, src: Image3, title: "foo", description: "bar" },
  { id: 4, src: Image4, title: "foo", description: "bar" },
  { id: 5, src: Image5, title: "foo", description: "bar" },
  { id: 6, src: Image6, title: "foo", description: "bar" },
  { id: 7, src: Image7, title: "foo", description: "bar" },
  { id: 8, src: Image8, title: "foo", description: "bar" },
  { id: 9, src: Image9, title: "foo", description: "bar" },
  { id: 10, src: Image10, title: "foo", description: "bar" },
  { id: 11, src: Image11, title: "foo", description: "bar" },
];
const delay = 5000;

const Slideshow = () => {
  const [startIndex, setStartIndex] = useState(0);
  const imageCount = images.length;

  useEffect(() => {
    const timer = setTimeout(() => {
      // 起始索引逐张递增，取模实现循环滑动
      setStartIndex(prev => (prev + 1) % imageCount);
    }, delay);

    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, [startIndex, imageCount]);

  // 计算当前显示的三张图片，取模保证循环衔接
  const currentImages = [
    images[startIndex],
    images[(startIndex + 1) % imageCount],
    images[(startIndex + 2) % imageCount]
  ];

  // 渲染示例
  return (
    <div className="slideshow">
      {currentImages.map(img => (
        <img key={img.id} src={img.src} alt={img.title} />
      ))}
    </div>
  );
};

关键修改说明 #

• 循环索引逻辑：用(prev + 1) % imageCount替代原判断，实现起始索引逐张递增的循环效果，避免直接跳回第一张。
• 多图显示逻辑：基于起始索引，通过取模计算另外两张图片的索引，保证循环时最后一张能无缝衔接第一张。
• 定时器清理：在useEffect返回函数中清除定时器，防止组件重复渲染或卸载时出现内存泄漏。
• 状态语义优化：将原index改为startIndex，明确表示当前显示三张图片的起始位置，提升代码可读性。

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