轮播（2）

最新推荐文章于 2024-06-23 22:34:25 发布

weixin_44337220

最新推荐文章于 2024-06-23 22:34:25 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/weixin_44337220/article/details/103929580

版权

import React,{Component} from 'react'
import './Workflow.css'
export default class Workflow extends Component{

    constructor(){
        super()
        this.state={
            index:0  
        }
    }
    render(){
        return(
        <div className="outer">
        {/* <ul className="imgList" style={{left:-520*this.state.index+'px'}} > */}
        
        <ul className="imgList" style={this.changeStyle()} >
            <li><img src={require('./img/1.jpg')} /></li>
            <li><img src={require('./img/2.jpg')}/></li>
            <li><img src={require('./img/3.jpg')}/></li>
            <li><img src={require('./img/4.jpg')}/></li>
            <li><img src={require('./img/5.jpg')}/></li>
            <li><img src={require('./img/1.jpg')}/></li>
        </ul>
        <div className="navDiv">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
        )
    }

    // componentDidMount(){
    //     setInterval(()=>{
    //         if(this.state.index==5){
    //             this.setState({
    //                 index:-1
    //             })
    //         }
    //         this.setState({
    //             index:this.state.index+1
    //         })
    //     },2000)  
    // }

    changeStyle(){
        // return  {left:-520+'px'}
        return {display:this.state.index==index? 'block': 'none'}
        setInterval(()=>{
            if(this.state.index==5){
                this.setState({
                    index:-1
                })
            }
            this.setState({
                index:this.state.index+1
            })
        },2000)  
        
    }



}