用react写一个无缝轮播图

以下是一个使用React编写的无缝轮播图的示例：

首先，创建一个Carousel组件：

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

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [translateValue, setTranslateValue] = useState(0);
  
  const goToNextSlide = () => {
    if (currentIndex === images.length - 1) {
      setCurrentIndex(0);
      setTranslateValue(0);
    } else {
      setCurrentIndex(currentIndex + 1);
      setTranslateValue(translateValue - slideWidth());
    }
  };
  
  const goToPrevSlide = () => {
    if (currentIndex === 0) {
      setCurrentIndex(images.length - 1);
      setTranslateValue(-slideWidth() * (images.length - 1));
    } else {
      setCurrentIndex(currentIndex - 1);
      setTranslateValue(translateValue + slideWidth());
    }
  };
  
  const slideWidth = () => {
    return document.querySelector('.slide').clientWidth;
  };
  
  useEffect(() => {
    const slideInterval = setInterval(goToNextSlide, 3000);
    return () => clearInterval(slideInterval);
  }, []);
  
  return (
    <div className="carousel">
      <div className="slider-wrapper" style={{
        transform: `translateX(${translateValue}px)`,
        transition: 'transform ease-out 0.45s'
      }}>
        {images.map((image, index) => (
          <Slide key={index} image={image} />
        ))}
      </div>
      
      <LeftArrow goToPrevSlide={goToPrevSlide} />
      <RightArrow goToNextSlide={goToNextSlide} />
    </div>
  );
};

const Slide = ({ image }) => {
  const styles = {
    backgroundImage: `url(${image})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 60%'
  };
  
  return <div className="slide" style={styles}></div>;
};

const LeftArrow = ({ goToPrevSlide }) => (
  <div className="backArrow arrow" onClick={goToPrevSlide}>
    <i className="fa fa-angle-left fa-2x" aria-hidden="true"></i>
  </div>
);

const RightArrow = ({ goToNextSlide }) => (
  <div className="nextArrow arrow" onClick={goToNextSlide}>
    <i className="fa fa-angle-right fa-2x" aria-hidden="true"></i>
  </div>
);

export default Carousel;

然后，在你的应用中使用这个Carousel组件：

import React from 'react';
import Carousel from './Carousel';

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

const App = () => {
  return (
    <div className="App">
      <h1>无缝轮播图</h1>
      <Carousel images={images} />
    </div>
  );
};

export default App;

这个示例中，Carousel组件接收一个images数组作为props，其中每个元素都是一个图片的URL。然后，使用useState钩子来跟踪当前显示的图片索引和滑动的偏移量。goToNextSlide和goToPrevSlide函数用于切换到下一张和上一张图片。slideWidth函数用于计算每个滑块的宽度。

在useEffect钩子中，使用setInterval函数定期调用goToNextSlide函数来实现自动播放。返回一个清除定时器的函数以确保在组件卸载时清除定时器。

最后，Carousel组件渲染一个包含所有图片的.slider-wrapper容器，并使用translateX和transition属性来实现滑动效果。左右箭头使用LeftArrow和RightArrow组件实现，并在点击时调用相应的函数切换图片