自己写的代码，仿小米商城轮播图，下面是整个代码，可以直接在首页注册组件使用，样式我使用了sass

结构代码

<template>
    <div class="box">
      <div class="minbox" :style="`width:${width}px;height:${height}px`" @mouseenter="cutIn" @mouseleave="layOff">
      //左前进按钮
        <button class="left" @click="left" :flag="flag">
          <i class="el-icon-arrow-left"></i>
        </button>
        //右前进按钮
        <button class="right" @click="right" :flag="flag">
          <i class="el-icon-arrow-right"></i>
        </button>
        //图片
        <div class="banner" ref="banner" >
          <img
            :src="item"
            v-for="(item,index) of imgSrc"
            :key="index"
            :show="waiting.includes(index)"
          />
        </div>
      </div>
      //底部切换横杠
      <p>
        <span @mousemove="qiehuan(index)" v-for="(item,index) of imgSrc.length" :key="index">
          <a href="javascript:void(0)" :show="show == index"></a>
        </span>
      </p>
    </div>
</template>

业务代码

<script>
export default {
  props: {
  //图片路径
    imgSrc: {
      type: Array,
      default:[
        "http://39.100.7.70:81/public/imgs/cms_1.jpg",
        "http://39.100.7.70:81/public/imgs/cms_2.jpg",
        "http://39.100.7.70:81/public/imgs/cms_3.jpg",
        "http://39.100.7.70:81/public/imgs/cms_4.jpg"
      ]
    },
    //图片切换时间
    num: {
      type: Number,
      default:1000,
    },
    //宽
    width: {
      type: String,
      default:'1225'
    },
    //高
    height: {
      type: String,
      default:'460'
    }
  },
  data() {
    return {
    //定时器
      timer: "",
      //底部横杠样式改变
      show: 0,
      //做动画图片索引
      waiting: [1],
      //两边按钮显示
      flag: false
    };
  },
  methods: {
  //鼠标淡入轮播图
    cutIn() {
      this.flag = true;
      clearInterval(this.timer);
    },
    //淡出
    layOff() {
      clearInterval(this.timer);
      this.flag = false;
      this.bannerTime();
    },
    //定时器
    bannerTime() {
      this.timer = setInterval(() => {
        if (this.show == this.imgSrc.length - 1) {
          this.show = 0;
        } else {
          this.show++;
        }
      }, this.num);
    },
    alterLocation(showIndex) {
      const banner = this.$refs.banner;
      banner.children.forEach((item, index) => {
        item.style.transform = `translateX(${(index - showIndex) *
          this.width}px)`;
        if (showIndex - 1 < 0 && index == banner.children.length - 1) {
          item.style.transform = `translateX(-${this.width}px)`;
        }
        if (showIndex + 1 > banner.children.length - 1 && index == 0) {
          item.style.transform = `translateX(${this.width}px)`;
        }
      });
    },
    qiehuan(i) {
      clearInterval(this.timer);
      this.show = i;
      this.bannerTime();
    },
    left() {
      clearInterval(this.timer);
      if (this.show == 0) {
        this.show = this.imgSrc.length - 1;
      } else {
        this.show--;
      }
      this.bannerTime();
    },
    right() {
      clearInterval(this.timer);
      if (this.show == this.imgSrc.length - 1) {
        this.show = 0;
      } else {
        this.show++;
      }
      this.bannerTime();
    }
  },
  watch: {
    show(value, oldVal) {
      this.waiting.splice(0, this.imgSrc.length - 1, oldVal, value);
      this.alterLocation(value);
    }
  },
  mounted() {
    this.alterLocation(0);
    this.bannerTime();
  }
};
</script>

样式代码

<style lang="scss" scoped>
.box {
  position: relative;
  background: #fff;
  .minbox {
      position: relative;
      margin: 0px auto;
    .banner {
        width: 100%;
        height: 100%;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      > img {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        &[show] {
          transition: transform 0.5s;
          z-index: 2;
        }
      }
    }
  }
  p {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    span {
      display: inline-block;
      padding: 12px 4px;
      a {
        display: inline-block;
        width: 30px;
        height: 2px;
        background: #ccc;
        opacity: 0.5;
        &[show] {
          opacity: 1;
        }
      }
    }
  }
  .left,
  .right {
    width: 40px;
    height: 40px;
    outline: none;
    background: #ccc;
    border: none;
    position: absolute;
    background-color: rgba(31, 45, 61, 0.2);
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    border-radius: 50%;
    text-align: center;
    &:hover {
      background-color: rgba(31, 45, 61, 0.5);
    }
    i {
      color: #fff;
    }
  }
  .left {
    left: 5px;
    opacity: 0;
    transition: left 0.2s, opacity 0.2s;
    &[flag] {
      left: 20px;
      opacity: 1;
    }
  }
  .right {
    right: 5px;
    opacity: 0;
    transition: right 0.2s, opacity 0.2s;
    &[flag] {
      right: 20px;
      opacity: 1;
    }
  }
}
</style>