react 实现轮播图

使用 React 实现轮播图

方法一：基于 useState 和 useEffect 的简单轮播

通过 useState 管理当前显示的轮播项索引，结合 useEffect 实现自动轮播功能。

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

const SimpleCarousel = ({ items }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

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

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

方法二：使用 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';

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

  return (
    <Slider {...settings}>
      {items.map((item, index) => (
        <div key={index}>
          {item}
        </div>
      ))}
    </Slider>
  );
};

方法三：自定义过渡效果

通过 CSS 过渡和 React 状态管理实现更复杂的动画效果。

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

const FadeCarousel = ({ items }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [fade, setFade] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
        setFade(true);
      }, 500);
    }, 3000);
    return () => clearInterval(interval);
  }, [items.length]);

  return (
    <div style={{ position: 'relative', height: '300px' }}>
      <div style={{
        opacity: fade ? 1 : 0,
        transition: 'opacity 0.5s ease',
        position: 'absolute',
        width: '100%'
      }}>
        {items[currentIndex]}
      </div>
    </div>
  );
};

方法四：支持手动切换

添加导航按钮允许用户手动控制轮播。

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

const InteractiveCarousel = ({ items }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAutoPlaying, setIsAutoPlaying] = useState(true);

  const goToPrev = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
    setIsAutoPlaying(false);
  };

  const goToNext = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
    setIsAutoPlaying(false);
  };

  useEffect(() => {
    let interval;
    if (isAutoPlaying) {
      interval = setInterval(() => {
        setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
      }, 3000);
    }
    return () => clearInterval(interval);
  }, [isAutoPlaying, items.length]);

  return (
    <div style={{ position: 'relative' }}>
      <button onClick={goToPrev} style={{ position: 'absolute', left: 0, top: '50%' }}>Prev</button>
      <button onClick={goToNext} style={{ position: 'absolute', right: 0, top: '50%' }}>Next</button>
      <div style={{ overflow: 'hidden' }}>
        <div style={{ display: 'flex', transform: `translateX(-${currentIndex * 100}%)`, transition: 'transform 0.5s ease' }}>
          {items.map((item, index) => (
            <div key={index} style={{ minWidth: '100%' }}>
              {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

方法五：使用第三方库 react-awesome-slider

react-awesome-slider 提供多种预设动画效果和触摸支持。

安装依赖：

npm install react-awesome-slider

实现代码：

import React from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

const AwesomeCarousel = ({ items }) => {
  return (
    <AwesomeSlider>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </AwesomeSlider>
  );
};

关键实现要点

• 状态管理：使用 useState 跟踪当前显示的轮播项
• 自动轮播：通过 useEffect 和 setInterval 实现定时切换
• 过渡动画：利用 CSS 的 transform 或 opacity 属性创建平滑效果
• 响应式设计：确保轮播在不同屏幕尺寸下正常工作
• 用户交互：提供导航按钮并处理触摸事件

每种方法适用于不同场景，简单项目可使用纯 React 实现，复杂需求建议选择成熟的第三方库。