如何实现无缝无限循环图片画廊？React+SCSS问题求助

针对你遇到的两个核心问题，以下是具体的修复方案，基于复制图片组的极简实现（比瞬移/虚拟数组更高效易维护）：

问题1：无缝循环修复 #

原代码仅渲染一组图片，动画移动-100%后会出现空白间隙。通过复制一组图片，让动画移动距离刚好为单组图片的宽度，即可实现视觉上的无缝衔接。

问题2：间距不一致修复 #

原图片宽度计算未考虑gap的影响，导致总宽度溢出后间距被压缩。通过精确计算图片宽度，确保图片+间隙的总宽度刚好填满容器，解决间距不一致问题。

修改后的React组件代码 #

import React from 'react';
import '../../css/RotatingGallery/index.scss';

import mariage1 from '../../assets/mariage1.jpg';
import mariage2 from '../../assets/mariage2.webp';
import mariage3 from '../../assets/mariage3.jpg';
import mariage4 from '../../assets/mariage4.jpg';
import mariage5 from '../../assets/mariage5.png';
import mariage6 from '../../assets/mariage6.jpg';

const images = [mariage1, mariage2, mariage3, mariage4, mariage5, mariage6];
// 复制一组图片，实现无缝循环的视觉基础
const doubledImages = [...images, ...images];

const RotatingGallery = () => {
  return (
    <section className="Gallery">
      <h1>Mes récents projets</h1>
      <div className="GalleryContent">
        {doubledImages.map((image, index) => (
          <div key={index} className="image">
            <img 
              src={image} 
              alt={`Image ${(index % images.length) + 1}`} 
            />
          </div>
        ))}
      </div>
    </section>
  );
};

export default RotatingGallery;

修改后的SCSS代码 #

.Gallery {
  display: flex;
  max-height: 60vh;
  min-height: 500px;
  flex-direction: column;
  text-align: center;
  background: transparent;
  backdrop-filter: blur(15px);
  font-family: 'Bodoni Moda', serif;
  overflow: hidden;
  position: relative;
}

.GalleryContent {
  display: flex;
  gap: 30px;
  animation: scrollImages 60s linear infinite;
}

.image {
  // 精确计算图片宽度：容器宽度减去5个间隙后平分给6张图
  flex-basis: calc((100% - 5 * 30px) / 6);
  flex-shrink: 0; // 禁止图片被压缩，保证宽度稳定
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image img {
  height: 100%;
  object-fit: contain;
}

// 动画移动距离改为容器宽度的一半（即单组图片的总宽度）
@keyframes scrollImages {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

方案说明 #

1. 无缝循环原理：
   渲染两组完全相同的图片，当动画移动-50%时，第二组图片的起始位置刚好与第一组初始位置重合，动画循环时视觉上无任何间隙，实现完美无缝左移。

2. 间距一致原理：
   使用flex-basis精确计算每张图片的宽度，确保6张图片 + 5个30px间隙的总宽度刚好填满容器，避免flex布局自动压缩间距的问题，同时flex-shrink:0保证图片宽度不被挤压。

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