客户端JavaScript自动生成目录文件数组实现图片翻页

你的两段伪代码都不可行，问题出在这些地方： #

• 伪代码1：

  • JS不存在until file is not detected这种循环语法，无法直接这么写
  • 循环内第一行就执行return list，会直接终止循环，根本没法累加多个文件名
  • 用字符串拼接的方式生成的是字符串，不是你要的数组格式，应该用数组的push方法来添加元素

• 伪代码2：

  • 1<2是永远为真的条件，会导致死循环
  • 前端JS没法直接判断某个文件是否存在，这种判断写法不符合语法
  • return list写在break前面，break根本不会执行，而且同样存在字符串拼接成非数组的问题

无需学习新语言的可行方案 #

方案1：前端通过图片加载检测自动生成列表 #

前端JS没法直接检测文件存在，但可以尝试加载图片，加载成功就加入列表，失败就停止循环。代码示例：

const imgList = [];
let currentIndex = 1;

function loadNextImg() {
  const imgUrl = `fileNumber${currentIndex}.png`;
  const img = new Image();
  img.onload = function() {
    imgList.push(imgUrl);
    currentIndex++;
    loadNextImg(); // 继续尝试加载下一张
  };
  img.onerror = function() {
    // 加载失败，停止循环，此时imgList就是完整的图片数组
    initPageTurn(); // 调用翻页初始化逻辑
  };
  img.src = imgUrl;
}

// 开始执行检测
loadNextImg();

// 翻页逻辑示例
let currentPage = 0;
function initPageTurn() {
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const displayImg = document.getElementById('displayImg');

  function updateImg() {
    displayImg.src = imgList[currentPage];
  }

  prevBtn.addEventListener('click', function() {
    if (currentPage > 0) {
      currentPage--;
      updateImg();
    }
  });

  nextBtn.addEventListener('click', function() {
    if (currentPage < imgList.length - 1) {
      currentPage++;
      updateImg();
    }
  });

  // 初始化显示第一张图片
  if (imgList.length > 0) {
    updateImg();
  }
}

这个方案纯前端JS实现，不用学新语言，自动检测所有存在的图片，生成数组后初始化翻页按钮。

方案2：提前生成静态数组（适合图片数量固定的情况） #

如果图片数量不会频繁变动，可以用简单的本地脚本生成数组，不用学新语言：

• Windows用户：新建一个txt文件，写入以下内容，改后缀为.bat，放在图片文件夹里双击运行，会生成一个imgList.txt文件，里面就是数组代码：

@echo off
setlocal enabledelayedexpansion
echo const imgList = [ > imgList.txt
for %%i in (fileNumber*.png) do (
  echo   "%%i", >> imgList.txt
)
echo ]; >> imgList.txt

• Mac/Linux用户：打开终端，进入图片文件夹，运行以下命令，会生成imgList.js文件：

echo "const imgList = [" > imgList.js
for f in fileNumber*.png; do echo "  \"$f\"," >> imgList.js; done
echo "];" >> imgList.js

之后把生成的数组代码复制到你的HTML对应的JS里就行，后续维护图片只要重新跑一次脚本，不用手动修改数组。

内容的提问来源于stack exchange，提问作者PineappleWithKnife