Vue

HTML

<div id="app">
  <transition name="fade" mode="">
    <img :src="images[index]" :key="images[index]" width="320" height="213" style="position:absolute;">
  </transition>
</div>

CSS

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

Vue

new Vue({
  el: "#app",
  data: {
  	index: 0,
    images: [
    	'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Lagopus_muta_japonica_Mount_Tsubakuro.jpg/320px-Lagopus_muta_japonica_Mount_Tsubakuro.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Pair_of_mandarin_ducks.jpg/320px-Pair_of_mandarin_ducks.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg/320px-Vicu%C3%B1a_-_Chimborazo%2C_Ecuador.jpg',
    ]
  },
  mounted() {
  	setInterval(() => {
    	this.index = this.index < this.images.length - 1 ? this.index + 1 : 0;
    }, 3000);
  },
})