记录常用的前端小技巧 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");
      }
    }
  }

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值