vue 实现图片视频一个一个轮播

可以使用Vue的transition组件和v-for指令来实现图片和视频的轮播效果。

首先，需要在Vue组件中定义一个数组，用来存储图片和视频的路径。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <div :key="currentIndex">
        <img v-if="isImage(currentIndex)" :src="items[currentIndex]" />
        <video v-else :src="items[currentIndex]" controls></video>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: [
        "path/to/image1.jpg",
        "path/to/video1.mp4",
        "path/to/image2.jpg",
        "path/to/video2.mp4",
        "path/to/image3.jpg",
        "path/to/video3.mp4",
      ],
    };
  },
  methods: {
    isImage(index) {
      return /\.(jpe?g|png|gif)$/.test(this.items[index]);
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    },
  },
  mounted() {
    setInterval(this.next, 3000);
  },
};
</script>

上面的代码中，transition组件会根据currentIndex的变化来触发动画效果。当currentIndex变化时，会根据当前的路径判断是显示图片还是视频。isImage方法用来判断当前路径是否为图片。next方法用来更新currentIndex的值，实现轮播效果。在mounted钩子函数中，使用setInterval方法每隔3秒钟调用next方法，实现自动轮播效果。

最后，为了实现渐变动画效果，需要在样式表中定义一个.fade的类。

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
``