Question

我试图在React中创建无限幻灯片。有很多软件包可以帮助开发人员创建幻灯片，但我想自己做。

这是我尝试过的代码：

    changeImage() {
    this.props.adverts.advertImages.map((img,i) => {
    setInterval(() => {
      this.setState({bg: img.imgSrc})
    }, 3000*(i+1));
    });
  }

我在这个{this.changeImage()}

中返回div时调用了这个

在我有style={{backgroundImage: "url("+this.state.bg+")"}}

的元素上

一开始它很慢，不久之后它会加速......

Answer 1

你做错了。你的循环运行会发生什么，并创建一个x setInterval的实例（基于数组的长度），从而你运行的arrayIntervals数量很大。

您想要做的是以下内容：

您希望在经过一定时间后显示图像（3s）

    let index = 0;
    setInterval(() => {
      this.setState({
        bg: this.props.adverts.advertImages[index++].imgSrc
      })
      if (index === this.props.adverts.advertImages.length) index = 0;
    }, 3000);

如果你想添加额外的逻辑，比如在每次滴答后增加定时器间隔（使动画变慢），那么你可以将索引添加到3000

这里的主要问题是OP在渲染中调用了函数而不是在渲染时调用它

componentDidMount(){
 let index = 0;
    setInterval(() => {
      this.setState({
        bg: this.props.adverts.advertImages[index++].imgSrc
      })
      if (index === this.props.adverts.advertImages.length) index = 0
    }, 3000);
}

  render() {
    return (<div>
      <Advertisement 
      style={{ backgroundImage: "url("+this.state.bg+")" }} centered unit='billboard' test='Billboard' />
    </div>);
  }
}

Answer 2

直接注入此图片npm i react-infinite-image-link-carousel

有关此React软件包react-infinite-image-link-carousel

的参考

反应无限幻灯片

2 个答案: