图片左右滑动，并展示出选择的序号

import React, { useState, useEffect } from 'react';
import styles from './index.less';

const ImageSwitch = (props) => {
  // 传入图片的大小，及图片 图片是数组的形式
  const { width = 150, height = 150, picList = [] } = props;
  const [newPicList, setNewPicList] = useState(picList.map(item => ({
    img: item,
    count: 0,
  })));

  const [picIndex, setPicIndex] = useState(1); // 当前图片展示的是第几页，默认为第一页图片
  const [currentPicList, setCurrentPicList] = useState(newPicList.filter((item, index) => index < 4)); // 当前展示的图片

  //  向左走
  const turnLeft = () => {
    if (picIndex > 1) {
      setPicIndex(picIndex - 1);
      setCurrentPicList(newPicList.filter((item, index) => index >= ((picIndex - 2) * 4) && index < ((picIndex - 1) * 4)));
    }
  };
  // 向右走
  const turnRight = () => {
    if (picIndex < newPicList.length / 4) {
      setPicIndex(picIndex + 1);
      setCurrentPicList(newPicList.filter((item, index) => index < ((picIndex + 1) * 4) && index >= (picIndex * 4)));
    }
  };

  const clickImage = (index) => {
    const maxCountList = newPicList.map(item => item.count); // 查看所有的数字
    const maxCount = Math.max(...maxCountList); // 找出最大的
    let tempt = [...newPicList];
    const tempt2 = tempt[(picIndex - 1) * 4 + index].count;  //查看当前点击图片的count
    tempt[(picIndex - 1) * 4 + index].count = tempt[(picIndex - 1) * 4 + index].count > 0 ? 0 : maxCount + 1; // 如果当前图片count为0，则展示最大数字，否则展示为0

    // 如果点击图片的图片大于0，那么大于他本身的值都需要-1
    tempt.forEach((item) => {
      if (tempt2 > 0) {
        if (item.count > tempt2) {
          item.count -= 1;
        }
      }
    })
    setNewPicList(tempt);
    setCurrentPicList(tempt.filter((item, index) => index >= ((picIndex - 1) * 4) && index < ((picIndex) * 4)));
  };
  return (
    <div className={styles.root}>
      <div className={styles.wrap}>
        <div style={{ lineHeight: `${height}px` }} className={styles.arrow} onClick={turnLeft}>&lt;</div>
        {
          (picIndex - 1) * 4 < newPicList.length ? (
            <div className={styles.imgWrap}>
              <img src={currentPicList[0].img} width={width} height={height} onClick={() => { clickImage(0); }} />
              {currentPicList[0].count > 0 && <div className={styles.count}>{currentPicList[0].count}</div>}
            </div>
          ) : (<div style={{ width: `${width}px`, height: `${height}px` }} />)
        }
        {
          (picIndex - 1) * 4 + 1 < newPicList.length ? (
            <div className={styles.imgWrap}>
              <img src={currentPicList[1].img} width={width} height={height} onClick={() => { clickImage(1); }} />
              {currentPicList[1].count > 0 && <div className={styles.count}>{currentPicList[1].count}</div>}
            </div>
          ) : (<div style={{ width: `${width}px`, height: `${height}px` }} />)
        }
        {
          (picIndex - 1) * 4 + 2 < newPicList.length ? (
            <div className={styles.imgWrap}>
              <img src={currentPicList[2].img} width={width} height={height} onClick={() => { clickImage(2); }} />
              {currentPicList[2].count > 0 && <div className={styles.count}>{currentPicList[2].count}</div>}
            </div>
          ) : (<div style={{ width: `${width}px`, height: `${height}px` }} />)

        }
        {
          (picIndex - 1) * 4 + 3 < newPicList.length ? (
            <div className={styles.imgWrap}>
              <img src={currentPicList[3].img} width={width} height={height} onClick={() => { clickImage(3); }} />
              {currentPicList[3].count > 0 && <div className={styles.count}>{currentPicList[3].count}</div>}
            </div>
          ) : (<div style={{ width: `${width}px`, height: `${height}px` }} />)
        }
        <div style={{ lineHeight: `${height}px` }} className={styles.arrow} onClick={turnRight}>&gt;</div>
      </div>
    </div>
  );
};

export default ImageSwitch;

.root{
    .wrap{
        display: flex;
        .arrow{
            cursor: pointer;
        }
        .arrow:nth-child(1) {
            margin-right: 10px;
        }
        .arrow:last-child{
            margin-left: 10px;
        }
        .arrow:hover{
            background: rgba(0,0,0,0.06);
            color:#0055FF;
        }
        .imgWrap{
            position: relative;
            .count{
                position: absolute;
                top:4px;
                right: 4px;
                border-radius: 50%;
                height: 32px;
                width: 32px;
                text-align: center;
                background-color: #0055FF;
                vertical-align: middle;
            }
        }
    }
}