点击切换图片显隐时页面空白、刷新时按钮一闪而过如何解决？

问题原因 #

你代码的问题主要出在3个地方：

• window.onload 赋值错误：你写的 window.onload = displayImg() 是直接执行函数并将返回值绑定给onload事件，页面加载时就会立即执行一次函数，后续onload触发时反而没有对应的处理函数。正确写法是只传递函数引用，不加括号。
• if 语法和逻辑错误：
  1. if 的判断条件必须包裹在括号里
  2. 相等判断要用 == 或者 ===，你用的 = 是赋值操作，会直接修改slideNum的值，导致所有if判断都会命中，函数执行完只会显示最后一张图
  3. 你用的是独立的if判断而非else if，前一个判断修改slideNum后会继续命中后面的判断，单次调用会走完所有分支
• 默认所有图片都是隐藏状态，逻辑错误导致没有任何图片正常显示，所以页面加载后为空白。

修正方案 #

方案1：直接修改原有逻辑 #

只调整你现有代码的错误部分：

JS代码

var slideNum = 0
var initial = document.getElementById('0');
var imgOne = document.getElementById('1');
var imgTwo = document.getElementById('2');
var imgThree = document.getElementById('3');
var imgFour = document.getElementById('4');
var imgFive = document.getElementById('5');
var end = document.getElementById('6');
// 只传函数名，不加括号
window.onload = displayImg;
function displayImg() {
    // 条件加括号，用===判断，改用else if
    if (slideNum === 0) {
        initial.style.visibility = "visible";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 1) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "visible";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 2) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "visible";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 3) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "visible";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 4) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "visible";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 5) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "visible";
        end.style.visibility = "hidden";
        slideNum = slideNum + 1
    } else if (slideNum === 6) {
        initial.style.visibility = "hidden";
        imgOne.style.visibility = "hidden";
        imgTwo.style.visibility = "hidden";
        imgThree.style.visibility = "hidden";
        imgFour.style.visibility = "hidden";
        imgFive.style.visibility = "hidden";
        end.style.visibility = "visible";
        // 如果你需要循环到第一张图就改成slideNum = 0
        slideNum = 1
    }
}

CSS和HTML代码不需要改动。

方案2：优化简化逻辑 #

用数组存储图片元素，减少冗余代码，后续增加图片也不需要修改逻辑：

JS代码

var slideNum = 0
// 把所有图片元素存到数组里
const imgs = [
    document.getElementById('0'),
    document.getElementById('1'),
    document.getElementById('2'),
    document.getElementById('3'),
    document.getElementById('4'),
    document.getElementById('5'),
    document.getElementById('6')
]
window.onload = displayImg;
function displayImg() {
    // 先把所有图片设为隐藏
    imgs.forEach(img => img.style.visibility = 'hidden')
    // 显示当前序号的图片
    imgs[slideNum].style.visibility = 'visible'
    // 序号+1，超过总数后回到0（如果要跳过第一张初始图，可自行修改判断逻辑）
    slideNum = (slideNum + 1) % imgs.length
}

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