如何用ReactJS、TailWindCSS及原生JS实现无限图片轮播组件？

实现思路 #

无限轮播的核心是复制一份图片列表，当滚动到原列表末尾时，瞬间重置滚动位置到起始点，视觉上形成无缝循环的效果。结合React的状态管理和原生JS的滚动事件即可完成。

完整组件代码 #

import React, { useEffect, useRef, useState } from "react";

export default function ScrollImagesRight({ images }) {
  const carouselRef = useRef(null);
  const [isScrolling, setIsScrolling] = useState(false);

  useEffect(() => {
    const carousel = carouselRef.current;
    if (!carousel) return;

    // 复制原图片列表，实现无限滚动的视觉衔接
    const list = carousel.querySelector("ul");
    list.innerHTML += list.innerHTML;

    const scrollCarousel = () => {
      if (isScrolling) return;
      // 每次滚动一个图片宽度的距离，可根据实际调整
      const scrollAmount = 200;
      const targetScroll = carousel.scrollLeft + scrollAmount;

      // 平滑滚动到目标位置
      carousel.scrollTo({
        left: targetScroll,
        behavior: "smooth"
      });

      // 滚动结束后判断是否需要重置位置
      const resetScroll = () => {
        if (carousel.scrollLeft >= list.scrollWidth / 2) {
          carousel.scrollLeft = 0;
        }
        setIsScrolling(false);
      };

      setIsScrolling(true);
      setTimeout(resetScroll, 500); // 时长与平滑滚动保持一致
    };

    // 设置自动轮播定时器
    const interval = setInterval(scrollCarousel, 2000); // 每2秒滚动一次

    return () => clearInterval(interval);
  }, [images, isScrolling]);

  return (
    <div 
      ref={carouselRef}
      className="w-full bg-red-100 h-[200px] overflow-hidden relative"
    >
      <ul className="flex h-full gap-2 whitespace-nowrap">
        {images.map((imgUrl, index) => (
          <li key={index} className="w-[200px] h-full flex-shrink-0">
            <img 
              src={imgUrl} 
              alt={`轮播图-${index}`}
              className="w-full h-full object-cover"
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

关键细节说明 #

• 无限滚动逻辑：通过复制原列表，当滚动到复制内容的起始点时，瞬间将滚动条重置到0，视觉上没有断层感。
• TailWind样式适配：用overflow-hidden隐藏容器外的内容，flex+whitespace-nowrap实现横向排列，flex-shrink-0保证图片不会被压缩变形。
• React Hooks作用：useRef获取DOM元素用于操作滚动，useEffect处理自动轮播的定时器和滚动逻辑，useState防止滚动过程中重复触发事件。
• 自定义调整：可以修改scrollAmount（单次滚动距离）、setInterval的间隔时间，以及图片宽度（w-[200px]）来适配你的需求。

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