Javascript 当图像在某个时间间隔后更改时，如何在中设置图像动画？

我试图在react中制作一个图像滑块，其中

图像在5000秒后发生变化。
我在这里查过了。这个网站在哪里实现了这个功能。
我试着在react中实现同样的效果。我能够做到，但我的图像不是幻灯片（从右到左），换句话说，当第二个图像显示n视图时，图像不显示动画
这是我的密码

这决不是一个优雅的解决方案，但它确实在图像首次出现时从左侧滑入：

我认为您遇到的问题是因为您只渲染当前的故事，但您的大部分代码似乎都假设会有一个滚动的故事旋转木马，您可以像一个卷轴一样对其进行动画处理

使用滚动旋转木马方法，只需设置左侧CSS属性的动画，并根据当前可见的故事进行调整即可。即，在组件中维护当前索引的某些状态，然后将stories容器的“left”样式属性设置为该索引的倍数。例如：

const getLeftForIndex = index => ((index*325) + 'px');

<div className="ImageSlider" style={{ left: getLeftForIndex(currentStory) }}>
  <Stories />
</div>

const getLeftForIndex=index=>（（索引*325）+'px'）；
这绝不是一个优雅的解决方案，但它确实在图像第一次出现时从左侧滑入：

我认为您遇到的问题是因为您只渲染当前的故事，但您的大部分代码似乎都假设会有一个滚动的故事旋转木马，您可以像一个卷轴一样对其进行动画处理

使用滚动旋转木马方法，只需设置左侧CSS属性的动画，并根据当前可见的故事进行调整即可。即，在组件中维护当前索引的某些状态，然后将stories容器的“left”样式属性设置为该索引的倍数。例如：

const getLeftForIndex = index => ((index*325) + 'px');

<div className="ImageSlider" style={{ left: getLeftForIndex(currentStory) }}>
  <Stories />
</div>

const getLeftForIndex=index=>（（索引*325）+'px'）；
一种方法是始终在右侧准备好未来图像（下一个图像），以便您可以将其转换到左侧，同时将当前图像转换到左侧。所以他们俩一起搬家

在React中，这意味着您需要存储当前图像和下一个图像的索引，并且每X秒您需要将它们向左（或向右）移动，具体取决于您的操作

以下是概念证明：


const pics=[
'https://cdn.pixabay.com/photo/2017/06/19/07/12/water-lily-2418339__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg',
'https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg',
];
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
常量idxStart=0；
此.state={
索引：idxStart，
下一步：this.getNextIndex（idxStart），
动议：错，
};
}
getNextIndex（idx）{
如果（idx>=pics.length-1）{
返回0；
}
返回idx+1；
}
设置索引（idx）{
这是我的国家({
索引：idx，
下一步：this.getNextIndex（idx）
});
}
componentDidMount（）{
设置间隔（（）=>{
//在
这是我的国家({
搬家：对
});
//关
设置超时（（）=>{
这是我的国家({
移动：假
});
this.setIndexes（this.getNextIndex（this.state.index））；
}，500）；//与此处css转换中的延迟相同
}，2000）；//下一个幻灯片延迟
}
render（）{
const move=this.state.move？'move'：''；
if（this.state.move）{
}
返回(
{this.state.index}
{this.state.next}
);
}
}
React.render（
执行此操作的一种方法是始终在右侧准备好未来图像（下一个图像），以便您可以将其转换到左侧，同时将当前图像转换到左侧。因此，它们一起移动

在React中，这意味着您需要存储当前图像和下一个图像的索引，并且每X秒您需要将它们向左（或向右）移动，具体取决于您的操作

以下是概念证明：


const pics=[
'https://cdn.pixabay.com/photo/2017/06/19/07/12/water-lily-2418339__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641__480.jpg',
'https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg',
'https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg',
];
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
常量idxStart=0；
此.state={
索引：idxStart，
下一步：this.getNextIndex（idxStart），
动议：错，
};
}
getNextIndex（idx）{
如果（idx>=pics.length-1）{
返回0；
}
返回idx+1；
}
设置索引（idx）{
这是我的国家({
索引：idx，
下一步：this.getNextIndex（idx）
});
}
componentDidMount（）{
设置间隔（（）=>{
//在
这是我的国家({
搬家：对
});
//关
设置超时（（）=>{
这是我的国家({
移动：假
});
this.setIndexes（this.getNextIndex（this.state.index））；
}，500）；//与此处css转换中的延迟相同
}，2000）；//下一个幻灯片延迟
}
render（）{
const move=this.state.move？'move'：''；
if（this.state.move）{
}
返回(
{this.state.index}
{this.state.next}
);
}
}
React.render（
是否要使用React native或React dom（用于html）执行此操作。使用React native，您应该查看它的动画组件。是否要使用React native或React dom（用于html）。使用
const pics = [
  'https://cdn.pixabay.com/photo/2017/06/19/07/12/water-lily-2418339__480.jpg',
  'https://cdn.pixabay.com/photo/2017/07/18/18/24/dove-2516641__480.jpg',
  'https://cdn.pixabay.com/photo/2017/07/14/17/44/frog-2504507__480.jpg',
  'https://cdn.pixabay.com/photo/2016/09/04/13/08/bread-1643951__480.jpg',
];

class App extends React.Component {
  constructor(props) {
    super(props);
    const idxStart = 0;
    this.state = {
      index: idxStart,
      next: this.getNextIndex(idxStart),
      move: false,
    };
  }

  getNextIndex(idx) {
    if (idx >= pics.length - 1) {
      return 0;
    }
    return idx + 1;
  }

  setIndexes(idx) {
    this.setState({
      index: idx,
      next: this.getNextIndex(idx)
    });
  }

  componentDidMount() {        
    setInterval(() => {
      // on
      this.setState({
        move: true
      });
      // off
      setTimeout(() => {
        this.setState({
          move: false
        });
        this.setIndexes(this.getNextIndex(this.state.index));
      }, 500); // same delay as in the css transition here

    }, 2000); // next slide delay
  }
  render() {
    const move = this.state.move ? 'move' : '';
    if (this.state.move) {

    }
    return (
      <div className="mask">
        <div className="pic-wrapper">
          <div className={`current pic ${move}`}>
            {this.state.index}
            <img src={pics[this.state.index]} alt="" />
          </div>
          <div className={`next pic ${move}`}>
            {this.state.next}
            <img src={pics[this.state.next]} alt="" />
          </div>
        </div>
      </div>
    );
  }
}

React.render(<App />, document.getElementById('root'));


// CSS

.pic {
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  img {
    width: 100px;
    height: 100px;
  }
}

.current {
  left: 100px;
}

.current.move {
  left: 0;
  transition: all .5s ease;
}

.next {
  left: 200px;
}

.next.move {
  left: 100px;
  transition: all .5s ease;
}

.pic-wrapper {
  background: lightgray;
  left: -100px;
  position: absolute;

}

.mask {
  left: 50px;
  overflow: hidden;
  width: 100px;
  height: 120px;
  position: absolute;
}