每个重新加载的背景变化

Question

在这里，出于测试目的，我仅添加了一个背景图像，但是我实际需要做的是更改每个重新加载的背景。这意味着我需要通过一个阵列，其中所有图像的路径都将在那里，并且每个重新加载的背景都应改变。 代码附加在下面。整个项目基于React

function App() {
  return (
    <div className="App" style={
      { 
      backgroundImage: `url("back.jpg")`
      }
  }>
      <div className='container'>
      <div className='container'>
      <Header/>  
      <Footer/>
      </div>
      </div>
    </div>
  );
}

Answer 1

只需将其背景代码与此这样的代码：

   backgroundImage: `url('${backgroundUrlList[Math.floor((Math.random() * backgroundUrlList.length))]}')`

顺便说一句，您应该定义自己的背景图书馆。

Answer 2

您可以制作一系列图像，并设置第一个图像

很重要的是，这将每5秒更改图像！您可以更改使用效果的间隔。

const imgArray = [image1, image2, image3, image4, image5];
const [state, setState] = useState({ img: 0 });

！！

import image1 from "../assets/im1.jpeg";
import image2 from "../assets/im2.jpeg";
import image3 from "../assets/im3.jpeg";
import image4 from "../assets/im4.jpeg";
import image5 from "../assets/im5.jpeg";

​

useEffect(() => {
    const interval = setInterval(() => {
      if (state.img === 4) {
        setState((prev) => ({
          ...prev,
          img: 0,
        }));
      } else {
        setState((prev) => ({
          ...prev,
          img: state.img + 1,
        }));
      }
    }, 5000);
    return () => clearInterval(interval);
  }, [state.img]);

​DIV设置背景图像

    <section
            class="hero-wrap hero-wrap-2 js-fullheight ftco-degree-bg"
            style={{
              backgroundImage: `url(${imgArray[state.img]})`,
              // backgroundSize: "cover",
              backgroundPosition: "center",
              // overflow: "hidden",
            
            }}
           
          >

Answer 3

只需将图像URL存储到一个数组中，然后生成随机数即可。
然后使用生成的编号获取数组的随机索引。

let imageArr = ["back.jpeg", "front.jpeg", "forward.jpeg", "backward.jpeg", "other.jpeg"];
let randomNum = = Math.floor(imageArr.length * Math.random());
let randomImage = imageArr[randomNum];
console.log(randomImage);

添加随机图像变量如下所示。

<div className="App" style={
  { 
  backgroundImage: `url(${randomImage})`
  }

}＆gt;