响应式网页作品集轮播切换图片时JS修改src报404 Not Found错误

• 循环越界请求不存在的资源：通过选择器取到的.slides容器下总共有8个img标签（包含2个为实现无缝轮播复制的首尾克隆节点），原循环从索引1开始遍历到索引7，会依次拼接请求img1到img7的资源。但你实际的正方形图片最多只有img1到img5，自然会抛出img6、img7的404报错——你遇到的img6报错，就是循环走到索引6时，给那个克隆节点拼接了不存在的文件名导致的。
• 混淆DOM遍历计数器和图片资源命名序号：默认DOM里第n个img就对应img[n].jpg的资源，既没有考虑克隆节点的存在，也没有限制序号不能超过实际的图片总数，自然会生成无效的资源路径。

1. 修正循环逻辑，规避越界请求 #

• 提前定义实际的图片总数（比如正方形资源一共有5张，就设置常量标记最大序号），避免循环生成超出范围的文件名
• 单独处理克隆节点的资源路径，不让克隆节点参与序号计数，直接复用对应源图的路径
  改完的参考代码：

function changeSource() {
    const MAX_SQUARE_IMG = 5; // 替换成你实际的正方形图片总数
    const slideImgs = document.querySelectorAll('.slides img');
    let realImgIndex = 0; // 用独立计数器跟踪实际图片序号，不绑定DOM索引
    slideImgs.forEach(img => {
        // 首尾克隆节点单独匹配对应源图
        if (img.id === 'lastclone') {
            img.src = `/Assets/square/img${MAX_SQUARE_IMG}.jpg`;
            return;
        }
        if (img.id === 'firstclone') {
            img.src = `/Assets/square/img1.jpg`;
            return;
        }
        // 非克隆节点按顺序累加匹配对应序号的资源
        realImgIndex++;
        img.src = `/Assets/square/img${realImgIndex}.jpg`;
    })
}

2. 优化路径写法，降低错位风险 #

把原来的../Assets/square/xxx替换成根路径开头的/Assets/square/xxx，这个路径不会因为JS文件所在的目录层级变化出现解析偏移，永远从站点根目录定位资源，减少后续维护的问题。

3. 更省心的替代实现 #

如果不想自己写JS切换逻辑，可以直接用HTML原生的响应式图片能力，完全不需要手动写资源切换逻辑：

• 用<picture>标签包裹每张轮播图，配置不同场景下的资源路径
• 浏览器会根据当前的屏幕尺寸、方向自动选择匹配的资源加载，从根本上避免手动切换的逻辑错误
• 可以补充简单的加载兜底逻辑，当资源请求失败时自动切回默认的横版路径，避免出现破图。

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