使用ReactJS构建Pango.co.il风格的圆形滑块/轮播图教程

// Carousel.js
import React, { useState } from 'react';
import './Carousel.css'; // 引入样式文件

const Carousel = ({ items, radius = 250 }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const totalItems = items.length;
  const angleStep = 360 / totalItems; // 每个轮播项之间的角度间隔

  // 切换到下一个轮播项
  const handleNext = () => {
    setActiveIndex((prevIndex) => (prevIndex + 1) % totalItems);
  };

  // 切换到上一个轮播项
  const handlePrev = () => {
    setActiveIndex((prevIndex) => (prevIndex - 1 + totalItems) % totalItems);
  };

  // ... 渲染逻辑
};

export default Carousel;

// Carousel.js (渲染逻辑部分)
// ...
  return (
    <div className="carousel-wrapper"> {/* 定义透视 */}
      <div
        className="carousel-container"
        style={{
          transform: `rotateY(${activeIndex * -angleStep}deg)`, // 整体容器根据激活项旋转
          '--carousel-radius': `${radius}px`, // 将半径作为CSS变量传递
        }}
      >
        {/* 轮播项列表 */}
      </div>
      <button onClick={handlePrev} className="carousel-nav prev">上一个</button>
      <button onClick={handleNext} className="carousel-nav next">下一个</button>
    </div>
  );
// ...

/* Carousel.css */
.carousel-wrapper {
  perspective: 1000px; /* 景深，数值越大，透视效果越弱 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px; /* 调整容器高度 */
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.carousel-container {
  position: relative;
  width: 200px; /* 轮播项的宽度 */
  height: 200px; /* 轮播项的高度 */
  transform-style: preserve-3d; /* 启用3D变换 */
  transition: transform 0.8s ease-in-out; /* 容器旋转的过渡动画 */
}

// Carousel.js (渲染逻辑部分，在carousel-container内部)
// ...
        {items.map((item, index) => {
          const itemAngle = index * angleStep; // 计算当前项应旋转的角度

          // 判断是否为激活项、前一项或后一项
          const isActive = index === activeIndex;
          const isPrev = index === (activeIndex - 1 + totalItems) % totalItems;
          const isNext = index === (activeIndex + 1) % totalItems;

          return (
            <div
              key={index}
              className={`carousel-item ${isActive ? 'active' : ''} ${isPrev ? 'prev' : ''} ${isNext ? 'next' : ''}`}
              style={{
                // 1. rotateY(itemAngle) 将项旋转到其在圆上的位置
                // 2. translateZ(var(--carousel-radius)) 沿Z轴平移，使其位于圆周上
                // 3. rotateY(calc(var(--item-angle) * -1)) 反向旋转，使其始终面向用户
                transform: `rotateY(${itemAngle}deg) translateZ(${radius}px) rotateY(${-itemAngle}deg)`,
                '--item-angle': `${itemAngle}deg`, // 将项的角度作为CSS变量传递
              }}
            >
              {item.content}
            </div>
          );
        })}
// ...

/* Carousel.css */
.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color: #333;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, z-index 0.8s ease-in-out;
  /* 初始状态：所有项都略微缩小和透明 */
  transform: rotateY(var(--item-angle)) translateZ(var(--carousel-radius)) rotateY(calc(var(--item-angle) * -1)) scale(0.7);
  opacity: 0.6;
  z-index: 1; /* 默认层级 */
}

/* Carousel.css */
/* 激活项样式 */
.carousel-item.active {
  transform: rotateY(var(--item-angle)) translateZ(var(--carousel-radius)) rotateY(calc(var(--item-angle) * -1)) scale(1.2); /* 放大 */
  opacity: 1; /* 完全不透明 */
  z-index: 10; /* 置于最前 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* 邻近项（前一个/后一个）样式 */
.carousel-item.prev,
.carousel-item.next {
  transform: rotateY(var(--item-angle)) translateZ(var(--carousel-radius)) rotateY(calc(var(--item-angle) * -1)) scale(0.9); /* 略微放大 */
  opacity: 0.8; /* 略微透明 */
  z-index: 5; /* 居中项之下 */
}