最近在做Vue的项目，需要图片和视频轮播，网上没有找到合适的插件，只好自己来造了。

视频图片轮播组件

<template>
  <div class="wrpaBox">
    <img 
      v-if="homeDataList.Type === '图片'" 
      :src="'./Data/'+ homeDataList.Src" 
      alt 
    />
    <video
      id="videoTime"
      v-if="homeDataList.Type === '视频'"
      autoplay
      muted
      @ended="goOnClick"
      controls
      :src="'./Data/'+ homeDataList.Src"
    />
  </div>
</template>

<script>
export default {
  props: {
    indexData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      homeDataList: {
        Type: null,
        Src: null
      },
      nowIndex: 0
    }
  },
  created () {
    // this.getData()
  },
  watch: {
    indexData: {
      handler (newValue) {
        this.indexData = newValue
        this.getData()
      }
    }
  },
  methods: {
    getData () {
      this.homeDataList = this.indexData[0]
      if (this.homeDataList.Type === '图片') {
        setTimeout(() => {
          this.starPlay()
        }, 3000)
      }
    },
    starPlay () {
      this.nowIndex++
      if (this.nowIndex > this.indexData.length - 1) {
        this.nowIndex = 0
        this.homeDataList = this.indexData[this.nowIndex]
        if (this.homeDataList.Type === '图片') {
          setTimeout(() => {
            this.starPlay()
          }, 3000)
        }
      } else {
        this.homeDataList = this.indexData[this.nowIndex]
        if (this.homeDataList.Type === '图片') {
          setTimeout(() => {
            this.starPlay()
          }, 3000)
        }
      }
    },
    goOnClick () {
      this.starPlay()
    }
  }
}
</script>

在页面中引入组件

<template>
    <indexVideo :index-data="indexData" />
<template>

<script>
import indexVideo from './components/Video'

export default {
  name: 'app',
  components: {
    indexVideo
  },
  data () {
    return {
      indexData: [
        {
          Type: "视频",
          Src: "one.mp4"
        },
        {
          Type: "图片",
          Src: "food.jpg"
        },
        {
          Type: "图片",
          Src: "beer.jpg"
        }
      ]
    }
  }
}
</script>

不足之处，还请多多指教！