手写一个简单的轮播组件（被逼无奈）

事件起因

这周接到一个任务是修改公司官网首页，之前的不太美观，要改的好看一点，不就是修改一个页面嘛，能复杂到哪里去，但是当我去蓝湖上查看UI的设计图时，瞬间愣住，这是修改？和之前的完全不一样啊，这是重构吧！果断评估了一下，至少得给我两三天的时间才能搞定，跟组长商量也同意了，那就开搞，首先就是顶部的轮播图，这个项目是vue的，UI框架用的是elemen-ui，所以我第一反应是用element-ui的跑马灯，但是和设计图好像不那么一样啊。。。

沟通了一下，能不能用跑马灯啊？省事，UI说要做点动效，底部的切换按钮也要照着设计图做，那跑马灯是实现不了了，问了一下要做什么动效，UI甩了一张gif图给我：

还好，很简单的动效，用css3动画就可以实现，我想到owl-Carousel插件可以写轮播，而且可以用css3自定义动态效果，而且也挺省事的，UI同意了，但是产品说vue项目用啥jQuery插件啊，直接给我否决了。。。这可给爷整吐了，咋就不能用啊，这个项目其他地方可没少用jQuery插件，这种框架里有组件或者有插件可以实现的东西，难不成还要我手写？程序员开发过程要尽量避免重复造轮子，如果复用性不是很高的话，没有特别大的意义，只会徒增开发工作量，但是产品咬得很紧，压根不听我的。。。

这种奇奇怪怪的需求让我很难受，无奈我只是一个卑微的实习生，只好妥协了。

等我转正了，第一时间是去换一个杯垫，我觉得有了这个杯垫，产品的需求肯定会越来越正常，话也会越来越少。

他这个轮播也不是很复杂，那我自己写就自己写呗。

开发思路以及编码

轮播不就是几块元素一直切换嘛，用定时器就好了，鼠标放上去就让定时器重置，移出就重新开启，用v-if控制显示，然后把切换按钮的样式写一下就得了，懒得一块一块贴代码了，主要是时间不早了今天有点困，上代码：

<template>
  <div>
    <div v-show="active === 0" class="banner banner-01" @mouseenter="closeTimers" @mouseleave="timers">
      <div class="banner-inner">
        <div class="left">
          <div class="left-animated">
            <img src="../../assets/img/home/banner/left-01.png">
            <p class="text-01">海量KOL资源 | 品牌文案全策划 | 短视频运营 | 大数据支撑</p>
            <p class="text-02">有效助力广告主实现成本可控 | 效果可观的媒体投放</p>
            <!-- <button class="button-01">立即使用</button> -->
          </div>
        </div>
        <img class="right-animated" src="../../assets/img/home/banner/right-01.png">
      </div>
    </div>
    <div v-show="active === 1" class="banner banner-02" @mouseenter="closeTimers" @mouseleave="timers">
      <div class="banner-inner">
        <div class="left">
          <div class="left-animated">
            <img src="../../assets/img/home/banner/left-02.png">
            <p class="text-01">内容孵化 | 创意策划 | 打造优质内容IP</p>
            <p class="text-02">短视频运营</p>
            <!-- <button class="button-02">立即使用</button> -->
          </div>
        </div>
        <img  class="right-animated" src="../../assets/img/home/banner/right-02.png">
      </div>
    </div>
    <div v-show="active === 2" class="banner banner-03" @mouseenter="closeTimers" @mouseleave="timers">
      <div class="banner-inner">
        <div class="left">
          <div class="left-animated">
            <img src="../../assets/img/home/banner/left-03.png">
            <p class="text-01">发掘优质账号 | 多维度粉丝画像分析</p>
            <p class="text-02">精准触达目标人群</p>
            <!-- <button class="button-03">立即使用</button> -->
          </div>
        </div>
        <img  class="right-animated" src="../../assets/img/home/banner/right-03.png">
      </div>
    </div>
    <div class="button">
      <div :class="active === 0 ? 'button-item button-active' : 'button-item'" @click="change(0)"></div>
      <div :class="active === 1 ? 'button-item button-active' : 'button-item'" @click="change(1)"></div>
      <div :class="active === 2 ? 'button-item button-active' : 'button-item'" @click="change(2)"></div>
    </div>
	</div>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      _timer: null
    }
  },
  mounted () {
    this.timers()
  },
  methods: {
    change (e) {
      this.active = e
      clearInterval(this._timer)
    },
    timers () {
      clearInterval(this._timer)
      this._timer = setInterval(() => {
        if (this.active < 1) {
          this.active ++
        } else {
          this.active = 0
        }
      }, 5000)
    },
    closeTimers () {
      clearInterval(this._timer)
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../assets/styles/themes/default/default.css';
.banner-01 {
  height: 545px;
  background: #ee3a3d no-repeat center/cover;
}
.banner-02 {
  height: 545px;
  background: url('../../assets/img/home/banner/bg-02.png') no-repeat center/cover;
}
.banner-03 {
  height: 545px;
  background: url('../../assets/img/home/banner/bg-03.jpg') no-repeat center/cover;
}
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .banner-inner {
    display: flex;
    .left {
      margin: 118px 209px 0 0;
      .text-01 {
        margin-top: 64px;
        font-size: 18px;
        color: #ffffff;
      }
      .text-02 {
        margin-top: 20px;
        font-size: 18px;
        color: #ffffff;
      }
      .button-01 {
        width: 110px;
        height: 48px;
        margin-top: 75px;
        font-size: 20px;
        font-weight: bold;
        color: #EE3A3D;
        background: #ffffff;
        border-radius: 7px;
        border: none;
      }
      .button-02 {
        width: 110px;
        height: 48px;
        margin-top: 75px;
        font-size: 20px;
        font-weight: bold;
        color: #4A42C8;
        background: #F9E566;
        border-radius: 7px;
        border: none;
      }
      .button-03 {
        width: 110px;
        height: 48px;
        margin-top: 75px;
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        background: #EE3A3D;
        border-radius: 7px;
        border: none;
      }
      @keyframes fadeInUp {
        0% {
          opacity: 0;
          transform: translate3d(0,100%,0)
        }
        to {
          opacity: 1;
          transform: none
        }
      }
      .left-animated {
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-name: fadeInUp;
      }
    }
    .right-animated {
      animation-duration: 2s;
      animation-fill-mode: both;
      animation-name: fadeIn;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0
      }
      to {
        opacity: 1
      }
    }
  }
}
.button {
  width: 119px;
  height: 30px;
  padding: 0 10px;
  margin: 0 auto;
  margin-top: -84px;
  background: rgba(36,36,36,0.2);
  border-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .button-item {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    cursor: pointer;
  }
  .button-active {
    width: 29px;
    border-radius: 6px;
  }
}
</style>

大概就这样吧，时间有点紧没有考虑太多细节，如果这个在之后的页面要用到的话就封成个组件，图片和 文案以数组的形式从父组件传进来，然后遍历展示就行了，记录一下被逼无奈造了个轮子，睡觉睡觉。

文章已转移到个人公众号，有帮到你的话，用发财的小手关注一下我的公众号呗~