首先用react实现一个同向无限滑动效果:
1.css部分:外层div设置超出隐藏,内层ul 设置足够宽,如果放6张图,700%宽就够了,因为要在末尾多放一张,这样滑动到第7张时也就是显示的第1张图,再关动画无缝切到第1张。内层li 宽100%,设置float。
2.增加class比如animate设置transition: 0.5s 这个自定
3.组件state中设置一个轮播对象的数组,比如pics
4.render()中渲染出来
<ul className={['lunbo', this.state.animate ? 'animate' : ''].join(' ')} style={
{ marginLeft: this.state.marginLeft }}>
{pics.map((it, i) => <li key={i}><img src={it.img} /></li>)}
</ul>
5.animate控制动画启停,marginLeft控制切换,你也可以用translateX,注意关动画无缝切换的条件:
animater() {
let ml = this.state.marginLeft
let len = this.state.pics.length
if (ml <= -(len - 1) * 600) { //这里图片区域600px宽
ml = 0
t