求助：自动图片轮播仅显示前两张图片问题排查

你的轮播出现问题主要有两个核心原因，咱们一步步拆解：

1. 定时器重复创建导致变量逻辑混乱 #

你把setInterval(changeImage, 2000)写在了changeImage函数内部，这意味着每次执行轮播切换时，都会新建一个定时器。随着轮播次数增加，多个定时器会同时触发，疯狂修改变量i的值，直接打乱了轮播的顺序逻辑——这就是为什么你只能看到前两张图，后续的切换逻辑已经被多个定时器搅乱了。

2. 第三张图片与第一张重复 #

看你的images数组，images[2]和images[0]用了完全相同的URL：

images[2] = 'https://placeimg.com/900/600/animals?t=1515065784396';

就算轮播正常触发到第三张，显示的内容和第一张完全一样，你会误以为没轮播到这张。

修复后的完整代码 #

JavaScript部分（script.js） #

var images = [];
var i = 0;

// 修正第三张图片的URL（换成不同的图）
images[0] = 'https://placeimg.com/900/600/animals?t=1515065784396';
images[1] = 'https://placeimg.com/900/600/animals?t=1515065867693';
images[2] = 'https://placeimg.com/900/600/animals?t=1515065900000'; // 修改为新的时间戳，确保图片不同

function changeImage() {
    "use strict";
    document.getElementById("slider").src = images[i];
    // 简化i的递增逻辑
    i = (i + 1) % images.length;
}

// 把定时器移到函数外部，只初始化一次
window.onload = function() {
    // 先显示第一张图，再启动定时器
    changeImage();
    setInterval(changeImage, 2000);
};

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> Automatic Image Slider </title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <img id="slider" alt="轮播图片"> <!-- 增加alt属性，优化网页无障碍性 -->
</body>
</html>

修复要点说明 #

• 把setInterval移到函数外部，确保整个轮播生命周期只有一个定时器在工作，避免变量i被多个定时器干扰。
• 用i = (i + 1) % images.length简化了轮播的循环逻辑，不用再写if-else判断，更简洁可靠。
• 修正了第三张图片的URL，确保三张图是不同的内容，能直观看到轮播效果。
• 给img标签增加了alt属性，符合网页无障碍标准。

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