复制W3Schools多幻灯片代码后第三个轮播无法显示及懒加载问题求助

问题根因 #

你遇到的第三个轮播无法显示的问题由两个配置疏漏导致：

• JS的轮播索引数组长度不足：你定义的slideIndex数组仅包含2个初始值，仅支持前2个轮播的索引存储，访问第三个轮播对应索引2时会返回undefined，导致JS执行逻辑中断，无图片加载请求发出。
• CSS隐藏规则缺失：现有CSS仅对.mySlides1、.mySlides2设置了默认隐藏的规则，新增的.mySlides3没有对应规则，导致轮播控制逻辑无法正常生效。

修复步骤 #

1. 调整JS代码中slideIndex的初始化值，补充第三个轮播的初始索引：

// 原代码
// var slideIndex = [1,1];
// 修改后
var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

2. 调整CSS的幻灯片默认隐藏规则，新增.mySlides3：

/* 原代码 */
/* .mySlides1, .mySlides2 {display: none} */
/* 修改后 */
.mySlides1, .mySlides2, .mySlides3 {display: none}

懒加载说明 #

你已经给所有轮播图片添加了原生loading="lazy"属性，当前主流浏览器都支持该特性，可实现图片进入视口前才触发加载的效果，无需额外修改代码。如果需要兼容低版本浏览器，可以补充引入懒加载polyfill适配。

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