当前位置：首页 > React

react实现图片滚动

2026-01-27 06:05:43React

实现图片滚动的几种方法

使用CSS动画

通过CSS的animation和@keyframes实现无限滚动效果。将图片列表包裹在容器中，通过CSS控制横向或纵向移动。

.scroll-container {
  display: flex;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

function ImageScroller({ images }) {
  return (
    <div className="overflow-hidden">
      <div className="scroll-container">
        {images.concat(images).map((img, i) => ( 
          <img key={i} src={img} alt="" />
        ))}
      </div>
    </div>
  );
}

使用React-Slick库

安装流行的轮播库react-slick，快速实现可定制的图片滚动效果。

npm install react-slick slick-carousel

import Slider from 'react-slick';

function ImageSlider({ images }) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    autoplay: true
  };

  return (
    <Slider {...settings}>
      {images.map((img, i) => (
        <div key={i}>
          <img src={img} alt="" />
        </div>
      ))}
    </Slider>
  );
}

使用useEffect和setInterval

通过React Hook实现手动控制的滚动逻辑，适合需要精细控制的情况。

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

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

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCurrentIndex(prev => (prev + 1) % images.length);
    }, 3000);

    return () => clearInterval(intervalRef.current);
  }, [images.length]);

  return (
    <div className="relative h-64 overflow-hidden">
      {images.map((img, i) => (
        <img 
          key={i}
          src={img}
          className={`absolute transition-all duration-500 ${i === currentIndex ? 'opacity-100' : 'opacity-0'}`}
          alt=""
        />
      ))}
    </div>
  );
}

使用transform实现无缝滚动

通过动态计算transform值实现高性能的无缝循环滚动。

function SeamlessScroller({ images }) {
  const [scrollX, setScrollX] = useState(0);
  const containerRef = useRef();

  useEffect(() => {
    const containerWidth = containerRef.current.scrollWidth / 2;
    const animate = () => {
      setScrollX(prev => {
        const newX = prev + 1;
        return newX >= containerWidth ? 0 : newX;
      });
      requestAnimationFrame(animate);
    };
    animate();
  }, []);

  return (
    <div ref={containerRef} className="overflow-hidden">
      <div 
        className="flex"
        style={{ transform: `translateX(-${scrollX}px)` }}
      >
        {images.concat(images).map((img, i) => (
          <img key={i} src={img} alt="" className="w-64 h-64 object-cover" />
        ))}
      </div>
    </div>
  );
}