记录常用的前端小技巧 react+antDesign 自动轮播

小技巧：现在有两个按钮，点击哪个按钮哪个按钮背景变深，另一个按钮背景变淡，同时不同的按钮对应不同的背景（两个按钮可以自动轮播；10s一次）；

idea+react+antDesign

首先：

  state = {
    buttonActive: 1   //按钮1:1；按钮2:2；
 }

render：

<div className={classnames(CSS.bgImg, this.state.buttonActive === 2 ? CSS.bgImg2 : null)}>
 	 <div className={CSS.bottomButton}>
            <Button className={classnames(CSS.button, CSS.left, this.state.buttonActive === 1 ? CSS.active : null)}
                    onClick={this.onClose}>
              按钮1
            </Button>
            <Button className={classnames(CSS.button, CSS.right, this.state.buttonActive === 2 ? CSS.active : null)}
                    onClick={this.showDrawer}>
              按钮2
            </Button>
          </div>
   </div>

！注意：用classnames需要引用哦～

import classnames from 'classnames';

用classnames可以引用多个样式，其中通过三元运算符来判断选择的是什么按钮，然后改变背景

方法：

autoChangeInterval = null;  //自动切换定时器

 autoChange = () => {  //自动轮播函数
    clearInterval(this.autoChangeInterval);
    this.autoChangeInterval = setInterval(() => {
      this.setState({
        buttonActive: this.state.buttonActive === 1 ? 2 : 1
      });
    }, 10000)
  };

  showDrawer = () => {  
    this.setState({
      buttonActive: 2
    }, this.autoChange);
  };

  onClose = () => {
    this.setState({
      buttonActive: 1
    }, this.autoChange);
  };

最后css：

.bgImg {
      width: 1920px;
      height: 1080px;
      background-image: url("../image/bgsmall.png");
      transition-duration: 500ms;

      &.bgImg2 {
        background-image: url("../image/tabBg.png");
      }
}

  .bottomButton {

    .button {
      position: absolute;
      background: url("../image/button1.png");
      border: none;
      height: 36px;
      width: 150px;
      top: 970px;
      padding-left: 18px;
      font-size: 22px;
      color: #ffffff;

      &.left {
        left: 771px;
      }

      &.right {
        left: 975px;
      }

      &.active {
        background: url("../image/button2.png");
      }
    }
  }

以上只是核心片段，适当改变即可应用哦～