使用DOM元素轮播数组中图片时图片无法显示的问题求助

API 探路者

2026-9-30

代码问题汇总

图片路径未加引号：JavaScript中字符串类型的路径必须用单/双引号包裹，你直接写cave.jpg会被引擎识别为未定义的变量，直接报错
img标签属性用错：修改图片显示地址需要操作src属性，value是input、select这类表单元素的专属属性，对img标签无效
事件绑定逻辑错误：onclick需要绑定可执行的函数，你直接写i++等于把i++的瞬时计算结果赋值给事件，点击按钮时不会执行任何轮播逻辑
初始化函数绑定错误：你定义的轮播函数叫slideshow，但window.onload绑定的是不存在的init函数，页面加载完成后根本不会触发你的初始化逻辑
缺少索引越界防护：没有对轮播索引做边界限制，索引超过数组长度或者小于0时会取不到图片地址

修正后的完整JavaScript代码

function slideshow(){
    'use strict';
    let i = 0;
    // 图片路径加引号确保为字符串类型，如果图片放在单独目录可对应修改路径前缀，比如'img/cave.jpg'
    const pics = [
        'cave.jpg',
        'creek.jpg',
        'entrance.jpg',
        'tree.jpg'
    ];
    const imgDom = document.getElementById('pictures');
    // 初始化显示第一张图
    imgDom.src = pics[i];
    
    // 前进按钮逻辑
    document.getElementById('forward').onclick = function() {
        i++;
        // 索引超过最大下标就回到第一张
        if(i >= pics.length) {
            i = 0;
        }
        imgDom.src = pics[i];
    }
    
    // 后退按钮逻辑
    document.getElementById('reverse').onclick = function() {
        i--;
        // 索引小于0就回到最后一张
        if(i < 0) {
            i = pics.length - 1;
        }
        imgDom.src = pics[i];
    }
}

// 绑定正确的初始化函数
window.onload = slideshow;