Question

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

逻辑以这种方式工作：

1）将要放入的所有图片来源组成一个数组（数组：图片）

2）将variable(Count)设置为0，以便从头开始。

3）将v-bind:src="pictures[count]"放在img标记上，以便通过变量（计数）更改源

4）将功能放到2个按钮上，这些按钮可以在图像中返回或在图像中前进。

<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>

它正常工作。问题在于，当我在上面放动画时，除了加载第一张图片外，其他所有图片都无法播放。

我尝试了transition: 0.5s，animation和Keyframes，但没有任何效果。我猜这是因为图片没有出现，但是它们被加载并且src被更改了。我如何使它工作？

Answer 1

要在Vue JS上构建幻灯片，我建议使用Vueper Slides。它将为您完成所有这些工作。

除非是出于学习目的。

幻灯片的动画无效

1 个答案: