react 简单轮播

原创已于 2022-03-03 09:38:27 修改 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-03-03 09:38:15 首次发布

本文介绍了如何使用React创建一个简单的轮播组件。通过state管理位置状态，并在构造函数中初始化，实现轮播图片的切换效果。

export default class Lunbo extends React.Component<any,any>{
constructor(props:any){
super(props);
this.state = {
locations: [“left100”, “left100”, “left100”, “left100”, “left100”],
index:0,
timer:null,
locationss: [“left0”, “left100”, “left100”, “left100”, “left100”]
}
}

componentDidMount() {
    this.l()
}
componentWillUnmount(){
    clearInterval(this.state.timer)
}

l() {
    const timer = setInterval(() => {
        let {index, locations} = this.state
        let _data = locations
        if(index >= _data.length - 1) {
            this.setState({index: 0})
        }else{
            this.setState({index: index + 1})
        }
        console.log(this.state.index)
        _data[this.state.index] = "left0"
        if(this.state.index + 1 > _data.length - 1){
            _data[0] = "left100"
        }else{
            _data[this.state.index + 1] = "left100"
        }

        if(this.state.index <= 0){
            _data[_data.length - 1] = "left_100"
        }else{
            _data[this.state.index - 1] = "left_100"
        }
        this.setState({locationss: _data})
    },2000)
    this.setState({timer})
}


render() {
    let {locations, locationss} = this.state
    return (
        <>
            <ul className="home_view_ul">
                {
                  locationss.map((v:string, i:number) => {
                      return <li key={"KS"+i} className={v}>{i}</li>
                  })
                }
            </ul>
        </>
    )
}

}