当前位置：首页 > React

react实现轮播图

2026-01-26 19:06:35React

实现轮播图的基本思路

轮播图的核心逻辑是通过定时或手动切换展示的图片索引，结合CSS动画实现平滑过渡效果。React中可通过状态管理当前索引，结合useEffect处理自动轮播逻辑。

基础实现代码示例

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

function Carousel({ images }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => 
        prevIndex === images.length - 1 ? 0 : prevIndex + 1
      );
    }, 3000);
    return () => clearInterval(interval);
  }, [images.length]);

  return (
    <div style={{ position: 'relative', overflow: 'hidden', width: '500px' }}>
      <div style={{ 
        display: 'flex',
        transform: `translateX(-${currentIndex * 100}%)`,
        transition: 'transform 0.5s ease-in-out'
      }}>
        {images.map((img, index) => (
          <img 
            key={index}
            src={img} 
            alt={`Slide ${index}`}
            style={{ width: '100%', flexShrink: 0 }}
          />
        ))}
      </div>
    </div>
  );
}

添加导航按钮

function CarouselWithButtons({ images }) {
  // ...保持之前的state和effect逻辑...

  const goToPrev = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const goToNext = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };

  return (
    <div style={{ position: 'relative' }}>
      {/* 图片展示部分与之前相同 */}
      <button 
        onClick={goToPrev}
        style={{ position: 'absolute', left: '10px', top: '50%' }}
      >
        Prev
      </button>
      <button 
        onClick={goToNext}
        style={{ position: 'absolute', right: '10px', top: '50%' }}
      >
        Next
      </button>
    </div>
  );
}

添加指示器 dots

function CarouselWithDots({ images }) {
  // ...保持之前的逻辑...

  return (
    <div>
      {/* 图片和按钮部分 */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: '5px' }}>
        {images.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentIndex(index)}
            style={{
              width: '10px',
              height: '10px',
              borderRadius: '50%',
              backgroundColor: index === currentIndex ? 'black' : 'gray'
            }}
          />
        ))}
      </div>
    </div>
  );
}

使用第三方库（推荐）

对于生产环境，推荐使用成熟的轮播库如react-slick：

安装依赖
```
npm install react-slick slick-carousel
```
基础实现
```
import Slider from 'react-slick';
```

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

return ( <Slider {...settings}> {images.map((img, index) => (