轮播（1）

import React,{Component} from 'react'
import './Workflow.css'
export default class Workflow extends Component{
    constructor(){
        super()
        this.state={
            index:1,  
        }
    }
    render(){
        return(
            <div className="outer">
                <ul className="imgList">
                    <li style={this.changeStyle(1)}><img src={require('./img/1.jpg')} style={{widht:'100%'}}/></li>             
                    <li  style={this.changeStyle(2)}><img src={require('./img/2.jpg')} style={{widht:'100%'}}/></li>
                    <li style={this.changeStyle(3)} ><img src={require('./img/3.jpg')} style={{widht:'100%'}}/></li>
                    <li style={this.changeStyle(4)} ><img src={require('./img/4.jpg')} style={{widht:'100%'}}/></li>
                    <li  style={this.changeStyle(5)}><img src={require('./img/5.jpg')} style={{widht:'100%'}}/></li>        
                </ul>
                <div className="navDiv">
                    <span  onClick={()=>{this.changeItems(1)}}></span>
                    <span  onClick={()=>{this.changeItems(2)}}></span>
                    <span  onClick={()=>{this.changeItems(3)}}></span>
                    <span  onClick={()=>{this.changeItems(4)}}></span>
                    <span  onClick={()=>{this.changeItems(5)}}></span>
                </div>
            </div>
        )
    }
    // componentDidMount(){
       
    // }    
    a=setInterval(()=>{
        if(this.state.index==5){
            this.setState({
                index:0
            })
        }
        this.setState({
            index:this.state.index+1
        })
    },2000)
    
    
    changeItems=(states)=>{
        let  a=states
            this.setState({
                index:a
            })   
        }

    changeStyle(index){
        return {display:this.state.index==index? 'block': 'none'}
    }
    
    }

来源：CSDN

作者：weixin_44337220

链接：https://blog.csdn.net/weixin_44337220/article/details/103929584