react手写轮播

这是我在项目中用到的一个轮播图，当然项目中是比这个多了点其它东西的，这个是我刚开始接到项目说要手写完成轮播的时候，简单写出了一个模子的，所以里面还保留了很多属性我是没有删除的。
使用的技术是rax，内核就是react，而且rax跟react-native特别像，如果你们接触过的话，那阅读下面的代码应该是没有压力的。你们也可以直接当react来使用就可以了，只是有些标签的区别而已，应该很容易理解的。如果是要原生js的轮播我的之前文章也是有的。所以直接去看代码吧

/** @jsx createElement */

"use strict";

import "./index.css";
import { createElement, useEffect, useState, useRef } from "rax";
import Text from "rax-text";
import View from "rax-view";
import Image from "rax-image";

import Table from './table'


let imgIndex = 1;
let numIndex = 0

export default (props) => {

  // console.log(props.data.imgs)
  const { imgs = [] } = props.data

  // const [mainHTML, setMainHTML] = useState()
  // const [mainScrollLeft, setMainScrollLeft] = useState()

  const [imgList, setImgList] = useState([])
  const [imgsLength, setLmgsLength] = useState()
  const [img1w, setImg1w] = useState()

  const timer1 = useRef()
  const timer2 = useRef()
  const nums = useRef()
  const numWrap = useRef()
  const mainHTML = useRef()

  useEffect(() => {
    setStyle()
    getInit()
    return ()=>{
      clearInterval(timer1)
      clearInterval(timer2)
    }
  }, [])


  const getInit = ()=>{

    numWrap.current.childNodes[0].style.backgroundColor = "red"

    // 处理数据
    let arrImg = imgs.map(item => item.imgUrl )
    arrImg.unshift(imgs[imgs.length - 1].imgUrl)
    arrImg.push(imgs[0].imgUrl)
    setImgList(arrImg)

    // 获取节点
    let main = mainHTML.current
    // setMainHTML(main)
    setImg1w(main.clientWidth)
    setLmgsLength(arrImg.length)
    // setMainScrollLeft(main.scrollLeft)
    main.scrollLeft = imgIndex * main.clientWidth

    autoMove(main,arrImg.length,main.clientWidth)
  }


// 自动轮播事件
const autoMove = (main,length,imgW)=>{
  
  timer1.current = setInterval(() => {
    numWrap.current.childNodes[numIndex].style.backgroundColor = "#ccc"
    imgIndex++,
    numIndex++
    if(imgIndex >= length){
      imgIndex = 2
    }
    if(numIndex >= imgs.length){
      numIndex = 0
    }
    numWrap.current.childNodes[numIndex].style.backgroundColor = "red"
    let start = (imgIndex-1) * imgW;//起始位置
    let end = imgIndex * imgW;//终点位置
    move(mainHTML.current,start,end)

  }, 3000);
}

const move = (main,start,end)=>{
  let minStep = 0;//最小步数
  let maxStep = 20;//最大步数
  let everyStep = (end - start) / maxStep;//每步所走的距离
  clearInterval(timer2.current);
  timer2.current = setInterval(function (){
      minStep++;
      if (minStep >= maxStep) {
          clearInterval(timer2.current);
      }
      start += everyStep;
      main.scrollLeft = start;
  },15);
}

// 右边点击事件
const rightAction = ()=>{
  clearInterval(timer1.current)
  numWrap.current.childNodes[numIndex].style.backgroundColor = "#ccc"
  imgIndex++
  numIndex++
  if(imgIndex >= imgsLength){
    imgIndex = 2
  }
  if(numIndex >= imgs.length){
    numIndex = 0
  }
  numWrap.current.childNodes[numIndex].style.backgroundColor = "red"
  let start = (imgIndex-1) * img1w;//起始位置
  let end = imgIndex * img1w;//终点位置
  move(mainHTML.current,start,end)
  autoMove(mainHTML.current,imgsLength,img1w)
}

// 左边点击事件
const leftAction = ()=>{
  clearInterval(timer1.current)
  numWrap.current.childNodes[numIndex].style.backgroundColor = "#ccc"
  imgIndex--
  numIndex--
  if(imgIndex < 0){
    imgIndex = imgsLength-3
  }
  if(numIndex < 0){
    numIndex = imgs.length-1
  }
  numWrap.current.childNodes[numIndex].style.backgroundColor = "red"
  let start = (imgIndex+1) * img1w;//起始位置
  let end = imgIndex * img1w;//终点位置
  move(mainHTML.current,start,end)
  autoMove(mainHTML.current,imgsLength,img1w)
}

// 圆点的点击事件
const touchAction = (index)=>{

  let start = imgIndex * img1w;//起始位置

  numWrap.current.childNodes[numIndex].style.backgroundColor = "#ccc"
  numIndex = index
  imgIndex = index+1
  numWrap.current.childNodes[numIndex].style.backgroundColor = "red"

  
  let end = imgIndex * img1w;//终点位置
  move(mainHTML.current,start,end)
}


const changeColor = (e)=>{
  e.target.style.backgroundColor = "red"
}
const defaultColor = (e)=>{
  e.target.style.backgroundColor = "#ccc"
}



  const d = arg => {
    return document.querySelectorAll(arg)[0];
  };
  const c = arg => {
    return document.querySelectorAll(arg);
  };

  const setStyle = () => {
    setTimeout(() => {
      d("#content").style.width = "100%";
      d("#recyclerview").style.overflow = "hidden";
      c(".mui-zebra-module").forEach(e => {
        e && (e.style.width = "100%");
      });
    }, 200);
  };



  return (
    <View className="area">
      <View className="content" style={S.content}>
        <View className="arrow" onMouseOver={e=>{ changeColor(e) }} onMouseOut={e=>{defaultColor(e)}} style={S.arrow} onClick={()=>leftAction()}>
          <Text style={S.arrowText}> &lt; </Text>
        </View>

        <View class="wrap" style={S.wrap}>
          <View class="main" style={S.main} ref={mainHTML}>
            <View class="imgs" style={S.imgs} >
              {
                imgList.map((item,index)=>
                  <Image key={index} className="silder" style={S.silder} source={{uri:item}}></Image>
                )
              }
              {/* <Image className="silder" style={S.silder} source={{uri:props.data.imgs[2]}}></Image>
              <Image className="silder" style={S.silder} source={{uri:props.data.imgs[0]}}></Image>
              <Image className="silder" style={S.silder} source={{uri:props.data.imgs[1]}}></Image>
              <Image className="silder" style={S.silder} source={{uri:props.data.imgs[2]}}></Image>
              <Image className="silder" style={S.silder} source={{uri:props.data.imgs[0]}}></Image> */}
            </View>
          </View>
        </View>
        
        <View className="arrow" onMouseOver={e=>{ changeColor(e) }} onMouseOut={e=>{defaultColor(e)}} style={S.arrow} onClick={()=>rightAction()}>
          <Text style={S.arrowText}> &gt; </Text>
        </View>
      </View>
      <View className="number" style={S.number} ref={numWrap} >
      {
        imgs.map((item,index)=>
          <View onClick={()=>{touchAction(index)}} ref={nums} key={index} className="loopNumber" style={S.loopNumber}></View>  
        )
      }
    </View>
      <Table></Table>
    </View>
  );
};

const S = {
  content:{
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  wrap:{
    width: "400px",
    height: "298px",
    // border: "1px solid red",
    position: "relative",
    overflow: "hidden",
  },
  main:{
    width: "400px",
    height: "320px",
    overflowX: "scroll",
  },
  imgs:{
    width: "6000px",
    height: "297px",
    display: "flex",
    flexDirection: "row",
    overflow: "hidden",
  },
  silder:{
    width: "400px",
    height: "296px",
  },
  arrow:{
    borderRadius: "50%",
    overflow: "hidden",
    width: "40px",
    height: "40px",
    backgroundColor: "#ccc",
    cursor: "pointer",
  },
  arrowText:{
    width: "40px",
    height: "40px",
    color:"#999",
    lineHeight: "40px",
    fontSize: "28px",
    textAlign: "center",
  },
  number:{
    flexDirection:"row",
    marginTop:"10px",
  },
  loopNumber:{
    width:"10px",
    height:"10px",
    backgroundColor:"#ccc",
    borderRadius:"50%",
    margin: "0 5px",
    cursor:"pointer"
  },
 
}