Javascript实现循环滚动广告栏

目的：实现一个一直循环滚动的广告栏
分析：

• 设置一个固定宽度的div,包裹滚动元素，超出隐藏。
• 放两倍的广告小图片
• 给每一个小图设定宽度
• setInterval固定时间给第一个元素设定负left，使其左移
• 如果负left的值等于所有广告图片（不是前面说的2倍的宽，是真实的每一个图相加的宽）的总宽度，就把left设为0。说明已经循环一遍

一些主要代码(react代码)

  //BottomCooperativeMedia 为存放图片的数组
  mediaList: [...BottomCooperativeMedia, ...BottomCooperativeMedia]

  public startInterval() {
    intervalTime = setInterval((() => {
      // 图片的张数 * 每个图片的宽度7rem
      if (Math.ceil(this.state.left) === - BottomCooperativeMedia.length * 7) {
        this.setState({ left: 0 });
      }
      this.setState({ left: this.state.left - 0.125 });
    }), 30)
  }

<div className="media-avatar" onMouseEnter={this.stopInterval}
    onMouseLeave={this.startInterval}>
  <p className="first-p" style={{ 'marginLeft': this.state.left + 'rem' }} />
  {this.state.mediaList.map((item: any, index: any) => {
    return <img key={index} className="img-style"
    onClick={this.clickHandler.bind(this, item.href)} src={item.src} alt="" />
  })}
</div>

React中要注意在组件卸载的时候取消定时器

public componentWillUnmount() {
  clearInterval(intervalTime)
}