使用React.js构建高级圆形轮播图：实现Pango.co.il风格的动态效果

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

const CircularCarousel = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef(null); // 用于获取容器元素

  // ... 其他逻辑

  return (
    <div className="carousel-container" ref={carouselRef}>
      {/* 幻灯片渲染 */}
    </div>
  );
};

// 在 itemStyle 计算中加入条件逻辑
const scaleValue = index === activeIndex ? 1.2 : 0.9; // 激活项放大，其他项缩小
const additionalTranslateZ = index === activeIndex ? 0 : 50; // 激活项不额外位移，其他项稍远

const itemStyle = {
  transform: `
    rotateY(${rotationAngle}deg)
    translateZ(${radius + additionalTranslateZ}px) /* 结合半径和额外位移 */
    rotateY(${-rotationAngle}deg)
    scale(${scaleValue}) /* 应用缩放 */
  `,
  // ... 其他样式
};

import React, { useState, useEffect, useRef } from 'react';
import './CircularCarousel.css'; // 引入CSS文件

const CircularCarousel = ({ data }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const carouselRef = useRef(null);

  const numItems = data.length;
  const angleStep = 360 / numItems;
  const radius = 300; // 圆形半径，可根据实际调整

  // 自动播放逻辑
  useEffect(() => {
    if (numItems === 0) return;
    const interval = setInterval(() => {
      setActiveIndex((prevIndex) => (prevIndex + 1) % numItems);
    }, 3000); // 3秒切换一次
    return () => clearInterval(interval);
  }, [numItems]);

  const goToNext = () => {
    setActiveIndex((prevIndex) => (prevIndex + 1) % numItems);
  };

  const goToPrev = () => {
    setActiveIndex((prevIndex) => (prevIndex - 1 + numItems) % numItems);
  };

  if (numItems === 0) {
    return <p>没有可展示的轮播项。</p>;
  }

  return (
    <div className="carousel-wrapper">
      <div className="carousel-container" ref={carouselRef}>
        {data.map((item, index) => {
          let offset = index - activeIndex;
          // 处理循环偏移量，确保最近的路径
          if (offset > numItems / 2) offset -= numItems;
          if (offset < -numItems / 2) offset += numItems;

          const rotationAngle = offset * angleStep;

          // 动态调整缩放和额外位移，创建层次感
          let scaleValue = 1;
          let currentRadius = radius;
          let opacityValue = 1;

          if (index === activeIndex) {
            scaleValue = 1.2; // 激活项放大
            currentRadius = radius; // 激活项在标准半径上
            opacityValue = 1;
          } else if (Math.abs(offset) === 1) {
            scaleValue = 0.9; // 相邻项略微缩小
            currentRadius = radius + 50; // 相邻项略微向后
            opacityValue = 0.9;
          } else if (Math.abs(offset) === 2) {
            scaleValue = 0.7; // 更远的项进一步缩小
            currentRadius = radius + 100; // 更远的项更向后
            opacityValue = 0.7;
          } else {
            // 隐藏太远的项，或使其非常小且透明
            scaleValue = 0.5;
            currentRadius = radius + 150;
            opacityValue = 0;
          }

          const itemStyle = {
            transform: `
              rotateY(${rotationAngle}deg)
              translateZ(${currentRadius}px)
              rotateY(${-rotationAngle}deg)
              scale(${scaleValue})
            `,
            opacity: opacityValue,
            transition: 'transform 0.6s ease-out, opacity 0.6s ease-out',
            zIndex: numItems - Math.abs(offset), // 靠近中心的项层级更高
          };

          return (
            <div
              key={item.id}
              className={`carousel-item ${index === activeIndex ? 'active' : ''}`}
              style={itemStyle}
            >
              @@##@@
              <h4>{item.title}</h4>
              <p>{item.description}</p>
            </div>
          );
        })}
      </div>
      <button className="carousel-nav prev" onClick={goToPrev}><</button>
      <button className="carousel-nav next" onClick={goToNext}>></button>
    </div>
  );
};

export default CircularCarousel;

/* CircularCarousel.css */
.carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px; /* 限制整体宽度 */
  height: 400px; /* 整体高度 */
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-container {
  width: 100%;
  height: 100%;
  perspective: 1200px; /* 关键：设置透视深度 */
  transform-style: preserve-3d; /* 关键：保留3D变换 */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item {
  position: absolute;
  width: 200px; /* 幻灯片宽度 */
  height: 150px; /* 幻灯片高度 */
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  color: #333;
  /* 初始定位到中心，然后由transform移动 */
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 宽度的一半 */
  margin-top: -75px; /* 高度的一半 */
  backface-visibility: hidden; /* 防止背面渲染问题 */
}

.carousel-item img {
  max-width: 80%;
  max-height: 80px;
  object-fit: contain;
  margin-bottom: 10px;
}

.carousel-item h4 {
  margin: 0;
  font-size: 1.1em;
  color: #007bff;
}

.carousel-item p {
  font-size: 0.85em;
  color: #666;
  margin-top: 5px;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1.5em;
  border-radius: 50%;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.carousel-nav:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-nav.prev {
  left: 20px;
}

.carousel-nav.next {
  right: 20px;
}