效果圖如下：

image.png

包含功能：動畫自動輪播、鼠標懸浮出現左右箭頭點擊輪播、顯示輪播點
代碼如下 直接拿來用即可

<template>
  <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()">
    <img src="https://fc4tn.baidu.com/it/u=2258281299,305481422&fm=202" :class="v1" />
    <img src="https://img2.baidu.com/it/u=2537370952,3446004972&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694192400&t=c2ca919c44b1872acf92166fc0360843" :class="v2" />
    <img src="https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" :class="v3" />
    <div class="dot-view">
        <div :class="dot1">
        </div>
        <div :class="dot2">
        </div>
        <div :class="dot3">
        </div>
    </div>
    <div class="arrow-view" v-show="isActive">
        <img src="../assets/arrow.png" class="arrow-left" @click="toLeft()" />
        <img src="../assets/arrow.png" class="arrow-right" @click="toRight()" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return{
      timer: '',
      isActive: false,
      value: 1,
      v1: 'banner wz1',
      v2: 'banner wz2',
      v3: 'banner wz3',
      dot1: 'dot-1 dot-color-actived',
      dot2: 'dot-2 dot-color-normal',
      dot3: 'dot-3 dot-color-normal'
    }
  },
  created() {},
  methods:{
    toLeft() {
      this.value--
      if (this.value == 0) {
          this.value = 3
      }
      this.changeClasss()
    },
    toRight() {
        this.value++
        if (this.value > 3) {
            this.value = 1
        }
        this.changeClasss()
    },
    mouseOver() {
        this.isActive = true
        clearInterval(this.timer);
    },
    mouseLeave() {
      this.isActive = false
      this.timer = setInterval(this.get, 3000);
    },
    changeClasss() {
        if (this.value == 1) {
            this.v1 = 'banner wz1'
            this.v2 = 'banner wz2'
            this.v3 = 'banner wz3'
            this.dot1 = 'dot-1 dot-color-actived'
            this.dot2 = 'dot-2 dot-color-normal'
            this.dot3 = 'dot-3 dot-color-normal'
        }
        if (this.value == 2) {
            this.v1 = 'banner wz2'
            this.v2 = 'banner wz3'
            this.v3 = 'banner wz1'
            this.dot1 = 'dot-1 dot-color-normal'
            this.dot2 = 'dot-2 dot-color-actived'
            this.dot3 = 'dot-3 dot-color-normal'
        }
        if (this.value == 3) {
            this.v1 = 'banner wz3'
            this.v2 = 'banner wz2'
            this.v3 = 'banner wz1'
            this.dot1 = 'dot-1 dot-color-normal'
            this.dot2 = 'dot-2 dot-color-normal'
            this.dot3 = 'dot-3 dot-color-actived'
        }
    },
    get() {
      this.value++;
      if (this.value > 3) {
          this.value = 1
      }
      this.changeClasss()
    }
  },
  mounted() {
    this.timer = setInterval(this.get, 3000);
    this.get
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
}
</script>
<style lang="scss" scoped>
 .arrow-left {
      position: absolute;
      left: 20px;
      top: 250px;
      cursor: pointer;
      transform: rotate(180deg);
  }
  .arrow-right {
      position: absolute;
      left: 280px;
      top: 250px;
      cursor: pointer;
  }
  .article-main {
      width: 320px;
      height: 300px;
      position: relative;
  }
  .banner {
      border-radius: 4px;
      position: absolute;
      transition: all 1s;
  }
  .wz1 {
      width: 280px;
      height: 160px;
      left: 80px;
      z-index: 777;
      top: 40px;
  }
  .wz2 {
      width: 290px;
      height: 180px;
      left: 60px;
      top: 30px;
      z-index: 888;
  }
  .wz3 {
      width: 300px;
      height: 200px;
      left: 40px;
      top: 20px;
      z-index: 999;
  }
  .dot-view {
      position: absolute;
      left: 120px;
      top: 255px;
      display: flex;
      flex-direction: row;
  }
  .dot-color-actived {
      background-color: #ff0000;
  }
  .dot-color-normal {
      background-color: #333;
  }
  .dot-1 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
  }
  .dot-2 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-left: 20px;
  }
  .dot-3 {
      margin-left: 20px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
  }
</style>