走马灯封装

走马灯功能需求：

1. 支持定时切换；
2. 支持左右按钮切换（根据鼠标是否在切换组件内展示和隐藏左右切换按钮）；
3. 支持底部标识切换；

走马灯 完整代码如下： 

/**
 * @class 走马灯
 */

import react, { Component } from 'react';
import './index.less';
import React from 'react';

export default class CarouselCpn extends Component {
    /**
     * @param {*} props.itemList 传入元素数组 []
     * @param {*} props.autoplay 是否自动切换，默认false
     * @param {*} props.autoplaySpeed 自动切换的间隔（毫秒），默3000ms
     */
    constructor(props) {
        super(props);

        const { itemList = [], autoplay = false, autoplaySpeed = 3000 } = props;
        this.timer = 0; //计时器
        this.state = {
            pointIndex: 0,
            autoplaySpeed, // 自动切换的间隔（毫秒）
            boxLen: 0, // 内容长度
            autoplay, // 是否自动切换
            itemList, // 传入元素数组 []
        };
    }

    onMounted() { }

    componentDidMount() {
        const { itemList } = this.state;
        this.setState({
            boxLen: itemList.length,
        })

        if (this.state.autoplay) {
            this.play();
        }
    }

    /**
     * 右按钮事件
     */
    goRight() {
        if (this.state.pointIndex < (this.state.boxLen - 1)) {
            this.setState({
                pointIndex: this.state.pointIndex + 1,
            })
        } else {
            this.setState({
                pointIndex: 0,
            })
        }
    }

    /**
     * 左侧切换按钮
     */
    onclickLeftBtn() {
        if (this.state.pointIndex == 0) {
            this.setState({
                pointIndex: (this.state.boxLen - 1),
            });
        } else {
            this.setState({
                pointIndex: this.state.pointIndex - 1,
            });
        }
    }

    /**
     * 右侧切换按钮
     */
    onclickRightBtn() {
        if (this.state.pointIndex < (this.state.boxLen - 1)) {
            this.setState({
                pointIndex: this.state.pointIndex + 1,
            });
        } else {
            this.setState({
                pointIndex: 0,
            });
        }
    }

    /**
     * 点击对应的点
     * 
     * @param {*} indexValue 序号标识
     */
    onClickPoint(indexValue) {
        this.setState({
            pointIndex: indexValue,
        })
    }

    /**
     * 开始定时
     */
    play() {
        this.timer = setInterval(() => {
            this.goRight();
        }, this.state.autoplaySpeed);
    }

    /**
     * 是否清除定时
     * @param {boolean} isRight 
     * @returns 
     */
    setTimer = (isRight) => {
        if (this.state.autoplay) {
            if (!isRight) {
                clearInterval(this.timer);
                this.timer = 0;
            } else if (isRight) {
                this.play();
            }
        }
    }

    render() {
        const { pointIndex, itemList } = this.state;
        const { keyIndex } = this.props;
        return (
            <div
                className="wrap"
                key={keyIndex}
                onMouseMove={this.setTimer.bind(this, false)}
                onMouseLeave={this.setTimer.bind(this, true)}
                style={{ width: '460px', height: '292px' }}
            >
                <ul className="list" style={{ width: '460px', height: '292px' }}>
                    {itemList.map((itemVaue, indexValue) => {
                        return <li
                            className={indexValue === pointIndex ? 'item active' : 'item'}
                            key={`item${indexValue}`}
                            style={{
                                zIndex: indexValue === pointIndex ? 20 : 1,
                                opacity: indexValue === pointIndex ? 1 : 0,
                            }}
                        >
                            {itemVaue}
                        </li>;
                    })}
                </ul>
                <ul className="pointList">
                    {itemList.map((itemVaue, indexValue) => {
                        return (
                            <li
                                className={indexValue === pointIndex ? 'point active' : 'point'}
                                data-index={indexValue}
                                onClick={this.onClickPoint.bind(this, indexValue)}
                                key={`point${indexValue}`}
                            ></li>
                        );
                    })}
                </ul>
                <button className="btn" id="leftBtn" onClick={this.onclickLeftBtn.bind(this)} style={{ display: 'none' }}>{'<'}</button>
                <button className="btn" id="rightBtn" onClick={this.onclickRightBtn.bind(this)} style={{ display: 'none' }}>{'>'}</button>
            </div>
        );
    }
}