react实现轮播效果

使用 React 实现轮播效果

轮播效果可以通过多种方式实现，以下是几种常见的方法：

使用第三方库（如 react-slick）

安装 react-slick 库：

npm install react-slick slick-carousel

基本使用示例：

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function Carousel() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000
  };

  return (
    <Slider {...settings}>
      <div><h3>Slide 1</h3></div>
      <div><h3>Slide 2</h3></div>
      <div><h3>Slide 3</h3></div>
    </Slider>
  );
}

export default Carousel;

自定义实现轮播组件

创建一个简单的轮播组件：

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

function SimpleCarousel({ slides, interval = 3000 }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => 
        prevIndex === slides.length - 1 ? 0 : prevIndex + 1
      );
    }, interval);

    return () => clearInterval(timer);
  }, [slides.length, interval]);

  return (
    <div style={{ overflow: 'hidden', position: 'relative' }}>
      <div style={{ 
        display: 'flex',
        transition: 'transform 0.5s ease',
        transform: `translateX(-${currentIndex * 100}%)`
      }}>
        {slides.map((slide, index) => (
          <div key={index} style={{ width: '100%', flexShrink: 0 }}>
            {slide}
          </div>
        ))}
      </div>
    </div>
  );
}

// 使用示例
function App() {
  const slides = [
    <div style={{ height: '300px', background: 'red' }}>Slide 1</div>,
    <div style={{ height: '300px', background: 'green' }}>Slide 2</div>,
    <div style={{ height: '300px', background: 'blue' }}>Slide 3</div>
  ];

  return <SimpleCarousel slides={slides} />;
}

使用 CSS 动画实现

结合 CSS 动画的轮播实现：

import React, { useState, useEffect } from 'react';
import './Carousel.css';

function CSSCarousel({ items }) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((prevIndex) => (prevIndex + 1) % items.length);
    }, 3000);
    return () => clearInterval(interval);
  }, [items.length]);

  return (
    <div className="carousel-container">
      <div 
        className="carousel-track"
        style={{ transform: `translateX(-${index * 100}%)` }}
      >
        {items.map((item, i) => (
          <div key={i} className="carousel-item">
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

// Carousel.css
.carousel-container {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  box-sizing: border-box;
}

添加导航按钮

增强轮播功能的完整组件示例：

function EnhancedCarousel({ children }) {
  const [activeIndex, setActiveIndex] = useState(0);
  const count = React.Children.count(children);

  const nextSlide = () => {
    setActiveIndex((prev) => (prev === count - 1 ? 0 : prev + 1));
  };

  const prevSlide = () => {
    setActiveIndex((prev) => (prev === 0 ? count - 1 : prev - 1));
  };

  return (
    <div style={{ position: 'relative' }}>
      <div style={{ overflow: 'hidden' }}>
        <div style={{
          display: 'flex',
          transform: `translateX(-${activeIndex * 100}%)`,
          transition: 'transform 0.3s ease'
        }}>
          {React.Children.map(children, (child, index) => (
            <div key={index} style={{ minWidth: '100%' }}>
              {child}
            </div>
          ))}
        </div>
      </div>

      <button 
        onClick={prevSlide}
        style={{ position: 'absolute', left: 0, top: '50%' }}
      >
        &lt;
      </button>
      <button 
        onClick={nextSlide}
        style={{ position: 'absolute', right: 0, top: '50%' }}
      >
        &gt;
      </button>

      <div style={{ textAlign: 'center', marginTop: '10px' }}>
        {Array.from({ length: count }).map((_, i) => (
          <button
            key={i}
            onClick={() => setActiveIndex(i)}
            style={{ 
              margin: '0 5px',
              background: i === activeIndex ? 'black' : 'gray'
            }}
          />
        ))}
      </div>
    </div>
  );
}

选择哪种实现方式取决于项目需求。第三方库提供更多功能但增加包大小，自定义实现更轻量但需要更多开发工作。