Question

我正在尝试制作类似这样的幻灯片。

html：

<div class="wrapper">
</div>

css：

.wrapper {
    background-image: url(dynamic_image_url);
}

dynamic_image_url是特定目录中的文件。

我想在js端实现的是通过单击按钮来随机访问目录中的下一张图像。

我不确定这是后端工作还是前端工作。我发现了一些与Node.js相关的信息，但是我不确定那不是我所需要的。我对后端知识很少。

此外，我尝试使用Vue构建它（如果有关系的话）。

所以我的主要问题是：如何通过循环目录访问文件名？

编辑：我不知道这些图像的确切文件名，因为我可能会在目录中添加新图像，并且我不想重命名图像或手动在数组中添加该名称。

Answer 1

这是使用vue js的解决方案，例如，我使用虚拟url，但是您可以在数组中列出它们，并引用资产目录 /assets/images/home.png

中的图像

HTML：

<div id="app">
  <div class="wrapper" :style="wrapper"></div>
  <button @click="previous">Previous</button>
  <button @click="next">Next</button>
</div>

具有vue的Js：

new Vue({
  el: "#app",
  data: {
    imgs: [
      { path: "https://picsum.photos/200/300" },
      { path: "https://picsum.photos/150/300" },
      { path: "https://picsum.photos/220/300" },
      { path: "https://picsum.photos/310/300" },
    ],
    currentImgIndex: 0
  },
  computed: {
    wrapper () {
        return {
        'background': `url(${this.imgs[this.currentImgIndex].path})`
      }
    }
  },
  methods: {
    next () {
        this.currentImgIndex >= this.imgs.length-1 ? this.currentImgIndex = 0 : this.currentImgIndex++ 
    },
    previous () {
        this.currentImgIndex <= 0 ? this.currentImgIndex = this.imgs.length-1 : this.currentImgIndex-- 
    }
  }
})

css：

.wrapper {
  width: 200px;
  height: 200px;
}

这是一个JS小提琴：https://jsfiddle.net/rvqehdkc/

编辑：我没有看到编辑过的消息，如果您不想引用所有图像，请查看：Looping through assets in Vue.js static directory

在JavaScript中的目录中访问文件名/ URL

1 个答案: