反应无限幻灯片

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 运行这是不好的。

您要做的是：

您想在经过一定时间（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-infinite-image-link-carousel

反应无限幻灯片

React infinite slideshow

javascript

slideshow

setinterval

reactjs