react 简单轮播

TPMS-IT

已于 2022-03-03 09:38:27 修改

阅读量271

点赞数 1

文章标签： react.js javascript 前端

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

本文链接：https://blog.csdn.net/ITaspan/article/details/123245722

版权

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

摘要由CSDN通过智能技术生成

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{