React realizes carousel effect

2021-08-06 20:51:12
OfStack

In this paper, we share the example of React to realize carousel for your reference. The specific contents are as follows

Train of thought

1. Use global state for state management
2. Set the global subscript and divide the style of the table below the current picture
3. Timing circulation characters facilitate changing global subscripts


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    ul{
      width: 100%;
      text-align: center;
      list-style-type: circle;
    }
    ul>li{
      width: 2%;
      float: left;
    }
    img{
      width: 100%;
    }
    </style>
  <title> Carousel event </title>
</head>
<body>
  <div id="root" style="max-width: 700px;margin: 0 auto;"></div>
</body>
 
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
  window.onload=()=>{
    class Img extends React.Component{
      constructor(props) {
        super(props);
        this.state={
          listImg:[
            './img/banner1.jpg', 
            './img/banner2.jpg', 
            './img/banner3.jpg', 
            './img/banner4.jpg',
            './img/banner5.jpg',
          ],
          index:0
        }
      }
      // Timer execution 
      indexChange(){
        if(this.state.index == this.state.listImg.length-1){
          this.setState({
            index:0
          })
        }else{
          // this.state.index++;
          this.setState({
            index:this.state.index+1
          })
          console.log(this.state.index);
        }
      }
      componentDidMount(){
        setInterval(()=>{
          this.indexChange();
        },2000)
      }
      render(){
        let {listImg,index} = this.state;
        let imgList=listImg.map((item,imgIndex)=>{
          return <img src={item} key={imgIndex} style={{'display':index == imgIndex ? 'block' : 'none'}} className='img'/>  
        })
        let liList=listImg.map((item2,imgIndex2)=>{
          return <li key={imgIndex2} style={{'listStyleType':index == imgIndex2 ? 'initial' :'circle'}}></li> 
        })
        return (
          <div>
              {imgList}
            <div>
              <ul>
                {liList}
              </ul> 
            </div>
          </div>
        )
      
      }
    }
    
    ReactDOM.render(
      <Img />,
      document.getElementById("root")
    )
  }
 
</script>
</html>