基于IntersectionObserver实现轮播图文本随图切换的下一步方案

• 第一步：整理图片与描述的对应数据
  把图片数据和对应描述绑定，比如改成数组对象形式：

  const projectData = [
    { img: '图片1路径', desc: '图片1的专属描述' },
    { img: '图片2路径', desc: '图片2的专属描述' },
    // 补充更多图片及对应描述
  ];
  

  或者单独维护一个与图片索引匹配的描述数组：

  const descriptions = ['描述1', '描述2', '描述3'];
  

• 第二步：修改状态，跟踪当前显示的图片索引
  替换原来的ObserveVis状态，改为记录当前活跃图片的索引：

  const [currentIndex, setCurrentIndex] = useState(0);
  

• 第三步：给每张图片容器添加独立监听Ref
  创建Ref数组存储每张图片容器的DOM节点，替代单个imgRef1：

  const imgContainerRefs = useRef([]);
  

  渲染图片列表时给每个容器绑定Ref：

  <div ref={carouselRef}>
    {projectData.map((item, index) => (
      <div 
        key={index} 
        ref={el => imgContainerRefs.current[index] = el}
      >
        <img 
          onClick={() => window.open("项目链接")} 
          src={item.img} 
          alt="My Project Image" 
        />
      </div>
    ))}
  </div>
  

• 第四步：配置IntersectionObserver监听每张图片
  调整Observer逻辑，监听每个图片容器的可见性，更新当前显示的图片索引：

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const index = imgContainerRefs.current.indexOf(entry.target);
          if (index !== -1) setCurrentIndex(index);
        }
      });
    }, {
      threshold: 0.7, // 图片70%可见时判定为当前显示项，可按需调整
      root: carouselRef.current // 仅检测轮播容器内的可见性
    });
  
    imgContainerRefs.current.forEach(container => {
      if (container) observer.observe(container);
    });
  
    return () => {
      imgContainerRefs.current.forEach(container => {
        if (container) observer.unobserve(container);
      });
    };
  }, []);
  

• 第五步：同步切换按钮的索引更新逻辑
  修改滚动函数，在切换图片时同步更新currentIndex：

  const scrollToNextItem = () => {
    const nextIndex = Math.min(currentIndex + 1, projectData.length - 1);
    setCurrentIndex(nextIndex);
    imgContainerRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth' });
  };
  
  const scrollToPrevItem = () => {
    const prevIndex = Math.max(currentIndex - 1, 0);
    setCurrentIndex(prevIndex);
    imgContainerRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth' });
  };
  

• 第六步：渲染当前图片的专属描述
  根据currentIndex直接渲染对应描述：

  <p>{projectData[currentIndex].desc}</p>
  {/* 若用单独描述数组则写：<p>{descriptions[currentIndex]}</p> */}
  

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