图片轮播（Image Slider）上一张按钮功能异常求助

问题描述 #

我正在实现一个图片轮播组件，但prev（上一张）按钮功能异常，其余代码均正常工作。尝试多种方法后，该按钮要么无响应，要么跳转到下一张图片，无法实现预期的上一张切换功能。

相关代码 #

HTML部分

<body>
    <div>
        <img name="slide" width="80%" height="auto">
        <button id="nextImg">next</button>
        <button id="prevImg">prev</button>
    </div>
    <script src="script.js"></script>
</body>

JavaScript部分

var i = 0;
var image = [];
var time = 1000;

image[0] = 'image1.png'
image[1] = 'image2.jpg'
image[2] = 'image3.jpg'

function changeImg() {
    document.slide.src = image[i];
 
    if (i < image.length - 1) {
        i++;
    } else {
        i = 0;
    }

    setTimeout("changeImg()", time);
}

nextImg.onclick = function() {
    document.slide.src = image[i];
 
    if (i < image.length - 1) {
        i++;
    } else {
        i = 0;
    }
}

prevImg.onclick = function() {
    document.slide.src = image[i];
 
    if (i > image.length - 1) {
        i--;
    } else {
        i = 2;
    }
}

window.onload = changeImg;

问题分析 #

prev按钮的逻辑完全错误：

• 条件if (i > image.length - 1)永远不会成立，因为数组长度为3，image.length -1等于2，而i的取值范围是0~2，不可能大于2
• 每次点击prev都会执行else分支，把i强制设为2，导致要么停在最后一张图，要么直接跳转到最后一张，完全不符合“上一张”的需求

修复方案 #

修改prev按钮的点击事件逻辑，同时优化其他部分的代码逻辑（比如调整索引和设置图片的顺序，替换字符串形式的setTimeout）：

var i = 0;
var image = [];
var time = 1000;

image[0] = 'image1.png'
image[1] = 'image2.jpg'
image[2] = 'image3.jpg'

function changeImg() {
    document.slide.src = image[i];
 
    if (i < image.length - 1) {
        i++;
    } else {
        i = 0;
    }

    // 改用函数引用形式的setTimeout，更规范
    setTimeout(changeImg, time);
}

nextImg.onclick = function() {
    // 先调整索引，再设置图片，逻辑更清晰
    if (i < image.length - 1) {
        i++;
    } else {
        i = 0;
    }
    document.slide.src = image[i];
}

prevImg.onclick = function() {
    // 正确的上一张逻辑：如果当前是第一张，跳转到最后一张，否则索引减1
    if (i === 0) {
        i = image.length - 1;
    } else {
        i--;
    }
    document.slide.src = image[i];
}

window.onload = changeImg;

说明 #

• 修复后的prev按钮会正确将索引向前调整：当前显示第一张图时，点击prev会切换到最后一张；其他情况则切换到前一张
• 优化next按钮和自动轮播的逻辑顺序，先调整索引再设置图片，避免逻辑混淆
• 替换字符串形式的setTimeout("changeImg()", time)为函数引用setTimeout(changeImg, time)，避免潜在的安全问题和性能损耗

内容的提问来源于stack exchange，提问作者José Oliveira