Javascript 幻灯片放映'；s动画不'；行不通

在这个Vue组件中，我尝试制作幻灯片

逻辑是这样工作的：

1） 制作一个包含我要放入的所有图片源的数组（数组：图片）

2） 将

变量（计数）

设置为0，使其从开始处开始

3） 将

v-bind:src=“pictures[count]”

放在

img

标记上，以便通过变量（count）更改源

4） 将函数放在两个按钮上，在图像中返回或在图像中前进

<template>
  <div>
    <img v-bind:src="pictures[count]" alt="">
    <button @click="Switching(1)">Forward</button>
    <button @click="Switching(-1)">Back</button>
    <p>{{this.count + 1}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      pictures: [
        "http://www.hotel-bb.com/image.htm?id=93652",
        "https://s-ec.bstatic.com/images/hotel/max1280x900/681/68184730.jpg",
        "https://images.all-free-download.com/images/graphiclarge/hd_picture_of_the_beautiful_natural_scenery_03_166249.jpg",
        "https://images.all-free-download.com/images/graphiclarge/the_beach_at_dusk_couple_of_picture_165871.jpg"
      ],
      stop: false
    };
  },
  methods: {
    Switching: function(n) {
      this.count += n;
      if (this.count > this.pictures.length - 1) {
        this.count = 0;
      } else if (this.count < 0) {
        this.count = this.pictures.length - 1;
      }
    }
  }
};
</script>
<style scoped>
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
img {
  max-width: 800px;
  height: 500px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
</style>

向前地
返回
{{this.count+1}}

导出默认值{
数据（）{
返回{
计数：0，
图片：[
"http://www.hotel-bb.com/image.htm?id=93652",
"https://s-ec.bstatic.com/images/hotel/max1280x900/681/68184730.jpg",
"https://images.all-free-download.com/images/graphiclarge/hd_picture_of_the_beautiful_natural_scenery_03_166249.jpg",
"https://images.all-free-download.com/images/graphiclarge/the_beach_at_dusk_couple_of_picture_165871.jpg"
],
停止：错误
};
},
方法：{
切换：功能（n）{
这个。计数+=n；
如果（this.count>this.pictures.length-1）{
此值为0.count；
}else if（this.count<0）{
this.count=this.pictures.length-1；
}
}
}
};
@关键帧向左滑动{
0% {
转化：translateX（-100%）；
}
100% {
变换：translateX（0）；
}
}
img{
最大宽度：800px；
高度：500px；
动画：1s从左滑出1s幻灯片；
}

它工作正常。问题是，当我在上面放动画时，除了加载的第一张图片外，它不工作，当我通过两个按钮切换时，图片不会被设置动画

---

我尝试了

transition:0.5s

，

动画

和

关键帧

，但没有任何效果。我猜这是因为图片没有出现，但是它们被加载了，src被更改了。如何使其工作？

我建议在Vue JS上构建幻灯片。它会为你做所有这些

除非是为了学习