时间戳

首页 > 解决方案 > 如何动态覆盖来自某个文件夹的一组分组图像

javascript - 如何动态覆盖来自某个文件夹的一组分组图像

问题描述

假设我们有一个图像数据集，其中每个图像具有以下结构：

foo1.png
foo1_cloud.png
foo1_full.png

foo2.png
foo2_cloud.png
foo2_full.png

...

现在，假设这些图像都在一个somePath文件夹中，我们的问题如下。我们想要获取这些图像集（即foo1或图像集），并foo2叠加图像（例如、foo1.png和）。但是，我们希望以动态的方式执行此操作。因此，例如，每次我们按下Next或Previous按钮时，我们都可以在文件夹中迭代我们的图像数据集。foo1_cloud.pngfoo1_full.pngsomePath/

目前，我们拥有的是：







<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Title</title>
  <meta name="description" content="Content">
  <meta name="author" content="Content">

  <link rel="stylesheet" href="styles/index.css">

</head>

<body>
	<a href="#" class="previous">&#8249;</a>
	<img id="imgbase" src="somePath/foo1.png" />
	<img id="imgfull" src="somePath/foo1_full.png" />
	<img id="imgcloud" src="somePath/foo1_cloud.png" />
	<a href="#" class="next">&#8250;</a>
  <script src="scripts/server.js"></script>
</body>
</html>

首先，我们需要从somePath/文件夹中查询每个图像的文件名。因此，我们需要保证文件名（例如，，<filename>.png和） <filename>_cloud.png，<filename>_full.png以便我们可以覆盖三个文件。其次，我们需要为下一个或上一个文件名提供文件更新的行为。

所以，我们的问题如下：

我们如何动态覆盖文件夹中的一组分组图像？

标签： javascripthtmlcss

解决方案

推荐阅读