React 基于Tab的两边小图中间主图的轮播图

产品拿了一个JQuery做的官网要我实现一个中间主图两边小图的需求，周五加班没搞完，周末宅了两天终于搞完了，是我太菜了惹，自闭哭泣......

效果图，gif太大无法上传，就放一张静态图吧，暂时还有个缺陷是点击tab的时候，下一张图片没显示，但不想搞了，周一上班再说吧

 

html

          <Tabs
              activeKey={this.state.tabIndex + ""}
              onChange={this.tabChange}
              centered
            >
              {this.state.tabTxt.map((item, index) => {
                return <TabPane tab={item} key={index}></TabPane>;
              })}
            </Tabs>

            <div
              className="slider-container mart-30"
              ref={(ref) => (this.slider = ref)}
              onMouseOver={this.pause}
              // onMouseOut={this.play}
            >
              <div className="slider-content">
                {this.state.data.list_1.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className={["slider", this.setClass(index)].join(" ")}
                      onClick={this.swiperClick(index)}
                      style={this.setBGImg(item.icon)}
                    ></div>
                  );
                })}
              </div>
            </div>

函数

  state = {
    mobile: "",
    message_content: "", // 留言
    showDialog: false, // 免费咨询弹框
    tabIndex: "0", // tab下标
    tabTxt: [
      "高返点",
      "产品支持",
      "培训支持",
      "资源支持",
      "推广支持",
      "物料支持",
      "技术保障",
      "售后客服",
      "技术支持",
      "区域保护",
    ],
    data: this.props.data_list[9],
    timer: null, // 定时器
    // show: false, // 前后按钮显示
    currentIndex: 0, //显示第几个图片
    sliderDomList: [],
    autoPlay: true,
  };
  // console.log(this.state.data.list_3)

  // tabs标签切换
  tabChange = (index) => {
    console.log(index, "tabs标签切换");
    this.setState({
      tabIndex: index,
      currentIndex: index,
    });
  };


  componentDidMount() {
    //一开始自动播放
    this.play();
    this.setState({
      sliderDomList: this.slider.querySelectorAll("div.slider"),
    });
    // console.log(this.state.sliderDomList, '挂载')
  }
  componentWillUnmount() {
    // 组件销毁前清除定时器
    this.pause();
    console.log("组件销毁");
    this.setState = (state, callback) => {
      return false;
    };
  }
  //
  setClass = (i) => {
    let { currentIndex, data } = this.state;
    let next = currentIndex === data.list_1.length - 1 ? 0 : currentIndex + 1;
    let prev = currentIndex === 0 ? data.list_1.length - 1 : currentIndex - 1;
    switch (i) {
      case +currentIndex:
        return "active";
      case next:
        return "next";
      case prev:
        return "prev";
      default:
        return "";
    }
  };
  swiperClick = (index) => {
    // console.log(index, '点击事件');
  };
  setBGImg = (src) => {
    return {
      backgroundImage: `url(${src})`,
    };
  };
  play = () => {
    let { autoPlay } = this.state;
    this.pause();
    if (autoPlay) {
      setInterval(() => {
        this.next();
      }, 5000);
    }
  };
  pause = () => {
    let { timer } = this.state;
    clearInterval(timer);
  };
  next = () => {
    let { currentIndex, data } = this.state;
    this.setState({
      currentIndex: ++currentIndex % data.list_1.length,
      tabIndex: currentIndex % data.list_1.length,
    });
  };
  prev = () => {
    let { currentIndex, data } = this.state;
    this.setState({
      currentIndex: currentIndex === 0 ? data.length - 1 : currentIndex - 1,
      tabIndex: currentIndex === 0 ? data.length - 1 : currentIndex - 1,
    });
  };

css

.slider-container {
  width: 100%;
  height: 400px;
  text-align: center;
  padding: 10px 0;
  position: relative;
}

.slider-content {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  left: 0%;
  top: 0%;
  margin: 0px;
  padding: 0px;
  background-size: inherit;
}

.slider {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 50%;
  width: 65%;
  height: 100%;
  transition: 500ms all ease-in-out;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translate3d(-50%, 0, -80px);
  z-index: 1;
}

.slider:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  transition-delay: 100ms !important;
  transition: all 500ms;
  cursor: pointer;
}

.slider.active {
  transform: translate3d(-50%, 0, 0);
  z-index: 20;
}
.slider.prev {
  transform: translate3d(-75%, 0, -100px);
  z-index: 19;
  height: 300px;
  margin-top: 30px;
}
.slider.next {
  transform: translate3d(-25%, 0, -100px);
  z-index: 18;
  height: 300px;
}