import React,{Component} from 'react'
import './Workflow.css'
//import { CSSTransition } from 'react-transition-group';
export default class Workflow extends Component{
constructor(){
super()
this.state={
index:0,
}
}
render(){
return(
<div className="outer" style={{overflow:'hidden'}}>
<ul className="imgList" style={{left:-520*this.state.index+'px',transition:this.state.index==0?'':'left 0.5s'}} >
{/* <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 onClick={()=>{this.changeItems(0)}}></span>
<span onClick={()=>{this.changeItems(1)}}></span>
<span onClick={()=>{this.changeItems(2)}}></span>
<span onClick={()=>{this.changeItems(3)}}></span>
<span onClick={()=>{this.changeItems(4)}}></span>
</div>
</div>
)
}
componentDidMount(){
setInterval(()=>{
if(this.state.index==4){
this.setState({
index:-1,
transition:null
})
}
this.setState({
index:this.state.index+1,
})
},2500)
}
changeItems=(states)=>{
let a=states
this.setState({
index:a
})
}
}
react编写轮播
最新推荐文章于 2022-05-02 18:42:34 发布