vue使用transition实现无缝轮播

直接上代码:

<template>
  <div class="page">
    <div class="carousel">
      <div class="inner">
        <div v-for="(item, index) in imgUrls" :key="index">
          <transition>
            <div class="carousel-item" v-if="index === currentIndex">
              <img :src="item" alt="" />
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      currentIndex: 0,
      imgUrls: [
        "https://img.hbhcdn.com/zhuanti/jh-img-orig-ga_1329336533799247872_600_300_25174.jpg",
        "https://img.hbhcdn.com/zhuanti/jh-img-orig-ga_1329337053091831808_600_300_36103.jpg",
        "https://img.hbhcdn.com/zhuanti/jh-img-orig-ga_1329337017066954752_600_300_37129.jpg",
      ],
    };
  },
  methods: {
    autoPlay() {
      setInterval(() => {
        this.setIndex();
      }, 3000);
    },
    setIndex() {
      this.currentIndex++;
      if (this.currentIndex == this.imgUrls.length) {
        this.currentIndex = 0;
      }
    },
  },
  mounted() {
    this.autoPlay();
  },
};
</script>

<style>
.carousel {
   600px;
  height: 300px;
  position: relative;
  margin: 0 auto;
}
.inner {
  position: relative;
   100%;
  height: 100%;
  overflow: hidden;  /*必须*/
}
.carousel-item {
  position: absolute; /*必须*/
  top: 0;
  left: 30px;
   100%;
  height: 100%;
  margin: 0 10px;
}
.v-enter-active,
.v-leave-active {  /*进入和离开需要执行时间*/
  transition: all 0.5s linear;
}
.v-enter-active {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-leave-active {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(-100%);
}
</style>

后续扩展放向:

　　1. 封装组件

　　2.可拖拽

　　3.轮播样式可定制化

　　4.基础拓展-->跑马灯功能

...