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

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

一些主要代码(react代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  //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中要注意在组件卸载的时候取消定时器

1
2
3
public componentWillUnmount() {
clearInterval(intervalTime)
}