javascript - react 无限幻灯片

Question

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

这是我试过的代码:

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

我在返回 div 时这样调用它 {this.changeImage()}

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

一开始很慢，过一会儿就变快了..

Answer 1

你做错了。发生的事情是你的循环运行并创建了一个 x setInterval 的实例(基于数组的长度)，因此你有一个 array.length 数量的 setIntervals 正在运行，这是不好的。

你要做的是:

您想在经过一定时间(3 秒)后显示图像

    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>);
  }
}