用react实现首页轮播图功能

效果：如果是播放到末图时再返回到首图，这个其实挺简单，但这种末首反方向切换效果让人感觉别扭。应该是一直向后滑动播放。
有种切换方式比如新闻或广告条向上翻动，这个场景必须在一个方向，所实现的方式是最后一条时把第一条信息push到最后，再把数组中第一条去掉，那么怎么无缝切换呢，这里比较关键，就是去掉动画和启用动画的操作，修改数据时关闭，再启动时开启。
这个做做除了鼠标经过启停没有其它交互的滚动条还可以，但用到轮播图，用到有指定页跳转，不断打乱数组次序就失去了对应关系也就不好切换到指定序列了。
所以使用另一种方式这可能是主流轮播插件的解决方案。我们在图末再放一张首图，滑到最后一张图时关闭动画，切换到第一张，再开启动画就行了。有些细节也需要处理好，比如手动指定切换某个序号的图时，切换下一张突然过快的问题。
方法：

1. css部分：外层div设置超出隐藏，内层ul 设置足够宽，如果放6张图，700%宽就够了，内层li 宽100%，float
2. 增加class比如animate设置transition: 0.5s 这个自定
3. 组件state中设置一个轮播对象的数组，比如pics，这个数组也许是异步数据，在数组中把pics[0]再塞进
4. render()中渲染出来

<ul className={['lunbo', this.state.animate ? 'animate' : ''].join(' ')} style={
  { marginLeft: this.state.marginLeft }}>