有没有办法在一段时间内改变图像？

Question

我想在3秒内改变左边的图像。是否有任何技术可以做到这一点，而不用反应图像滑块？

我把我的密码附在这里了。我试过用反应钩来做这件事。我已将图像存储在数组中。图像只在前8-10秒内发生完美的变化。

import React, { useEffect, useState } from "react";
import bannerImg1 from "../../Assets/Images/bannerProduct1.png";
import bannerImg2 from "../../Assets/Images/bannerProduct2.png";
import { Row, Col, Container } from "react-bootstrap";
import { FaCaretRight, FaChevronLeft, FaChevronRight } from "react-icons/fa";
import "./BannerSlider.css";

const BannerSlider = () => {
  const imageArray = [bannerImg1, bannerImg2];
  let [count, setCount] = useState(0);
  const [image, setImage] = useState(imageArray[count]);

  useEffect(() => {
    setImage(imageArray[count]);
  }, [count]);

  useEffect(() => {
    setInterval(() => {
      setCount(count + 1);
    }, 3000);
  }, []);

  return (
    <div className="bannerSlider">
      <Container>
        <div className="slider-wrapper">
          <Row className="d-flex align-items-center">
            <Col lg={6} className="banner-image">
              <img src={image} className="w-100 img-fluid" alt="" />
            </Col>
            <Col lg={6} className="banner-text">
              <h2>Where your imagination come true</h2>

              <p>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo
                porro neque odio, at aspernatur explicabo?{" "}
              </p>

              <button>
                Explore More <FaCaretRight className="banner-button-icon" />{" "}
              </button>
            </Col>
          </Row>
        </div>
      </Container>
    </div>
  );
};

Answer 1

问题

据我所读到的关于您的代码，您有几个问题：

当组件unmounts.

• You've在间隔回调中关闭初始count状态时，useEffect不清除任何运行定时器，因此无法正确更新。

• ，您不考虑超过数组长度。

解决方案

// move image array outside component so it's not a dependency
const imageArray = [bannerImg1, bannerImg2, bannerImg3];

const BannerSlider = () => {
  const [count, setCount] = useState(0);

  // Save timer ref and return cleanup function to clear it
  useEffect(() => {
    const timerId = setInterval(() => {
      // Use a functional state update to correctly increment the count
      setCount(count => count + 1);
    }, 3000);

    return () => clearInterval(timerId);
  }, []);

  // `image` is derived state from the image array and current count
  // Take the count mod array length to get the correct computed index
  const image = imageArray[count % imageArray.length];

  return (
    <div className="bannerSlider">
      <Container>
        <div className="slider-wrapper">
          <Row className="d-flex align-items-center">
            <Col lg={6} className="banner-image">
              <img src={image} className="w-100 img-fluid" alt="" />
            </Col>
            <Col lg={6} className="banner-text">
              <h2>Where your imagination come true</h2>

              <p>
                {" "}
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo
                porro neque odio, at aspernatur explicabo?{" "}
              </p>

              <button>
                Explore More <FaCaretRight className="banner-button-icon" />{" "}
              </button>
            </Col>
          </Row>
        </div>
      </Container>
    </div>
  );
};

​

​