用react写了个轮播组件，哈哈哈，hin不一样

最近用react模拟一个网站的首页，顺便模仿着写了个轮播组件。代码如下：

const React = require('React');


class Banner extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            /*
            *轮播图片设置
            *   url: 图片路径
            *   to:图片链接去处
            *   styleNow:class类
            */ 
            imgUrl: [
                {
                    url: '/app/images/F143874703.jpg',
                    to: '',
                    styleNow: 'checkSwiper-new'
                },{
                    url: '/app/images/F143872115.jpg',
                    to: '',
                    styleNow: 'checkSwiper-last'
                },{
                    url: '/app/images/F143872116.jpg',
                    to: '',
                    styleNow: 'checkSwiper-last'
                },{
                    url: '/app/images/F143872105.jpg',
                    to: '',
                    styleNow: 'checkSwiper-last'
                }
            ],
            // 切换图片的按钮，下边是1,2,3,4个按钮分别对应的类名
            checkPoint: [
                'newPoint',
                'oldPoint',
                'oldPoint',
                'oldPoint'
            ]
        };
        // 点击按钮切换轮播图片的方法
        this.clickSwiperHandle = this.clickSwiperHandle.bind(this);
    }
    // 在此处开启定时器开始自动轮播
    componentDidMount(){
        let count=1;
        let sum = this.state.imgUrl.length;
        this.timerId = setInterval(
            () => {
                this.autoSwiper(count);
                count<sum-1?count++:count=0;
            },
            6000
        );
    }
    // 在此处去除定时器
    componentWillUnmount(){
        clearInterval(this.timerId);
    }
    // 轮播方法的内部实现
    autoSwiper(count) {
        let aimImgUrl = this.state.imgUrl;
        let newImgArr = [];
        let aimCheckPoint = this.state.checkPoint;
        let newCheckPoint = [];
        for(let i=0,len=this.state.imgUrl.length;i<len;i++){
            if(i!==count){
                if(i==count+1) {
                    newImgArr.push(this.checkSwiper(aimImgUrl[i],'checkSwiper-next'));
                }else {
                    newImgArr.push(this.checkSwiper(aimImgUrl[i],'checkSwiper-last'));
                }
            }else {
                newImgArr.push(this.checkSwiper(aimImgUrl[count],'checkSwiper-new'));
            }
        }
        for(let j=0,len=aimCheckPoint.length;j<len;j++){
            if(j!==count){
                newCheckPoint.push('oldPoint');
            }else {
                newCheckPoint.push('newPoint');
            }
        }
        this.setState({
            imgUrl: newImgArr,
            checkPoint: newCheckPoint
        });
    }
    // 切换每张图片state状态的方法
    checkSwiper(aim,classNm){
        let res = Object.assign({},aim,{styleNow: classNm});
        return res;
    }
    // 按钮点击方法内部实现
    clickSwiperHandle(count){
        clearInterval(this.timerId);
        this.autoSwiper(count);
        let sum = this.state.imgUrl.length;
        let num=count+1<=sum-1?count+1:0;
        this.timerId = setInterval(
            () => {
                this.autoSwiper(num);
                num<sum-1?num++:num=0;
            },
            6000
        );
    }
    // 渲染
    render(){
        let lists = this.state.imgUrl;
        let listItems = lists.map((item,index) =>
            <li key={index} className={item.styleNow}>
                <a href={item.to}>
                    <img src={item.url} />
                </a>
            </li>
        );
        let pointsClass = this.state.checkPoint;
        let checkPoints = pointsClass.map( (item,index) =>
            <span key={index} className={item} onClick={(e) => this.clickSwiperHandle(index,e)}></span>
        );
        return (
            <div id="banner">
                <ul id="swiper">{listItems}</ul>
                <div className="checkBtn">
                    {checkPoints}
                </div>
            </div>
        );
    }
}
module.exports = Banner;

用到的css样式

//用于切换图片的样式
.checkSwiper-last {
    position: absolute;
    left: 0;
    opacity: 1;
    z-index: 1;
    transform: translateX(-855px);
}
.checkSwiper-new {
    position: absolute;
    left: 0;
    opacity: 1;
    z-index: 3;
    transform: translateX(0);
}
.checkSwiper-next {
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: 3;
    transform: translateX(855px);
    transition-duration: 0;
}
//切换按钮
.oldPoint {
    background-color: rgb(51,51,51)!important;
}
.newPoint {
    background-color: rgb(225,71,47)!important;
}

 

以前都是用通过操作dom实现的轮播，用react刚开始真是无从下手，还想着在react中怎么获取dom元素，哈哈哈哈。

1.轮播原理如下：

将所有图片叠在一起，通过在在定时器中改变指定图片的z-index值和tranafrom中的translateX值（改变className）即可，这是一次自动轮播。当用户点击下边切换图片的按钮时，去除定时器，点击完毕，再开启轮播定时器。

2.react实现原理：

创建一个Banner组件，将所有图片的可变信息（包括url,链接地址,class）和切换按钮的可变信息（class）保存在组件的state中，在定时器中改变state即可实现轮播。