使用ReactJS构建高级圆形旋转木马/滑块教程

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

const itemsData = [
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  { id: 3, content: 'Item 3' },
  { id: 4, content: 'Item 4' },
  { id: 5, content: 'Item 5' },
];

function CircularCarousel() {
  const [activeIndex, setActiveIndex] = useState(0); // 当前激活项的索引
  const totalItems = itemsData.length;

  // ... 其他逻辑
}

// 在 getTransformStyle 函数中增加逻辑
const getTransformStyle = (index) => {
  // ... (之前的角度和定位计算)

  let scale = 1;
  let zOffset = 0; // 额外的Z轴偏移，用于推远

  // 计算与activeIndex的距离，考虑循环性
  let diff = Math.abs(index - activeIndex);
  if (diff > totalItems / 2) { // 考虑循环距离，例如从0到N-1，距离1和N-1其实是1
    diff = totalItems - diff;
  }

  if (diff === 0) { // 激活项
    scale = 1.2;
    zOffset = 50; // 稍微向前推出，使其更突出
  } else if (diff === 1) { // 紧邻激活项的左右两侧
    scale = 0.9;
    zOffset = -50; // 稍微向后推远
  } else { // 更远的项
    scale = 0.7;
    zOffset = -100; // 推得更远
  }

  return {
    transform: `
      rotateY(${itemAngle}deg)
      translateZ(${radius + zOffset}px) /* 结合Z轴偏移 */
      rotateY(${-itemAngle - currentRotation}deg)
      scale(${scale}) /* 应用缩放 */
    `,
    opacity: diff > 2 ? 0.5 : 1, // 更远的项可以降低透明度
    zIndex: totalItems - diff, // 确保激活项在最上层
    // ... 其他样式
  };
};

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

const itemsData = [
  { id: 1, content: 'Item 1', color: '#ffadad' },
  { id: 2, content: 'Item 2', color: '#ffd6a5' },
  { id: 3, content: 'Item 3', color: '#fdffb6' },
  { id: 4, content: 'Item 4', color: '#caffbf' },
  { id: 5, content: 'Item 5', color: '#9bf6ff' },
  { id: 6, content: 'Item 6', color: '#a0c4ff' },
];

function CircularCarousel() {
  const [activeIndex, setActiveIndex] = useState(0);
  const totalItems = itemsData.length;
  const carouselInnerRef = useRef(null);

  const angleStep = 360 / totalItems;
  const radius = 300; // 调整此值以改变圆形大小

  // 整体旋转角度
  const carouselRotation = -activeIndex * angleStep;

  // 切换到上一个/下一个
  const goToPrev = () => {
    setActiveIndex((prevIndex) => (prevIndex - 1 + totalItems) % totalItems);
  };

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

  useEffect(() => {
    if (carouselInnerRef.current) {
      carouselInnerRef.current.style.transform = `rotateY(${carouselRotation}deg)`;
    }
  }, [carouselRotation]);

  return (
    <div className="carousel-wrapper">
      <div className="carousel-container">
        <div className="carousel-inner" ref={carouselInnerRef}>
          {itemsData.map((item, index) => {
            // 计算每个item的transform样式
            let scale = 1;
            let zOffset = 0;
            let opacity = 1;

            let diff = Math.abs(index - activeIndex);
            if (diff > totalItems / 2) {
              diff = totalItems - diff;
            }

            if (diff === 0) { // Active item
              scale = 1.2;
              zOffset = 100; // Push forward
            } else if (diff === 1) { // Immediate neighbors
              scale = 0.9;
              zOffset = -50; // Push backward
            } else if (diff === 2) { // Next layer
              scale = 0.7;
              zOffset = -150; // Push further backward
              opacity = 0.7;
            } else { // Hidden or very far items
              scale = 0.5;
              zOffset = -200;
              opacity = 0.3;
            }

            const itemAngle = index * angleStep;
            const itemTransform = `
              rotateY(${itemAngle}deg)
              translateZ(${radius + zOffset}px)
              rotateY(${-itemAngle - carouselRotation}deg) /* Counter-rotation */
              scale(${scale})
            `;

            return (
              <div
                key={item.id}
                className={`carousel-item ${index === activeIndex ? 'active' : ''}`}
                style={{
                  transform: itemTransform,
                  zIndex: totalItems - diff, // 控制层叠顺序
                  opacity: opacity,
                  backgroundColor: item.color, // 示例颜色
                }}
                onClick={() => setActiveIndex(index)} // 点击项使其激活
              >
                {item.content}
              </div>
            );
          })}
        </div>
      </div>
      <div className="carousel-controls">
        <button onClick={goToPrev}>Prev</button>
        <button onClick={goToNext}>Next</button>
      </div>
    </div>
  );
}

export default CircularCarousel;

/* CircularCarousel.css */
.carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

.carousel-container {
  width: 600px; /* 容器宽度 */
  height: 400px; /* 容器高度 */
  position: relative;
  perspective: 1200px; /* 3D透视深度 */
  transform-style: preserve-3d;
  overflow: hidden; /* 防止内容溢出 */
}

.carousel-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 平滑的缓动函数 */
}

.carousel-item {
  position: absolute;
  width: 150px; /* 项目宽度 */
  height: 100px; /* 项目高度 */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: #333;
  cursor: pointer;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s ease-in-out, z-index 0s; /* Z-index即时改变 */

  /* 居中定位 */
  top: 50%;
  left: 50%;
  margin-left: -75px; /* 宽度的一半 */
  margin-top: -50px; /* 高度的一半 */
}

.carousel-controls {
  margin-top: 30px;
}

.carousel-controls button {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 1em;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.carousel-controls button:hover {
  background-color: #0056b3;
}