一个简单的轮播
为了更具有通用和参考性,轮播组件中,轮播只使用了react,没有添加其他的状态管理,或者参数类型限制的库. 所以这个轮播的方法,同样可以用于vue 等其他框架
github地址
最终效果
显示无限循环原理
如图所示,如果轮播里面有三个部分,那么可以在首端前添加一个跟最后一块一样的dom节点,同理在最末端添加跟首端相同的节点,这样当轮播到末端,在下一张的情况下,就可以无缝衔接首端的节点,然后当动画结束后,在直接切换到真正的首端,就实现了无缝衔接的轮播器
组件代码
import React, {Component} from 'react';
import style from './style.use.less';
export default class Test extends Component {
static defaultProps = {
step: 2000,
animationStep: 1
}
constructor(props) {
super(props)
this.state = {
currentCarousel: 0,
translateList: [],
animationStep: 0,
}
this.handleCarouselBodyMouseOver = this.handleCarouselBodyMouseOver.bind(this);
this.handleCarouselBodyMouseOut = this.handleCarouselBodyMouseOut.bind(this);
this.handleCarouselFooterMouseOver = this.handleCarouselFooterMouseOver.bind(this);
this.renderIndicators = this.renderIndicators.bind(this);
this.getIndicatorsActive = this.getIndicatorsActive.bind(this);
this.handlerNext = this.handlerNext.bind(this);
this.handlerTransitionEn