JavaScript实现自动轮播图时添加JS代码后网页空白如何解决

加完JS页面全白，核心是两处逻辑错误：

• 类名重复导致选择器匹配错对象：你给外层的landing容器也加了slides类，document.getElementsByClassName("slides")会同时拿到外层容器、内层装图片的容器两个元素，根本不是要轮播的图片。循环里先把这两个容器全设为display: none，后续只给外层容器恢复显示，内层装图片的盒子始终是隐藏状态，内容自然完全看不到。
• 轮播操作对象混淆：轮播需要切换显隐的是单张图片，不是外层包裹容器，一开始选元素的目标就错了。

• 删掉外层div多余的slides类，避免选择器匹配到无关元素
• 把选择目标改成内层.slides容器下的所有img标签，也就是真正要轮播的内容
• 微调索引边界判断逻辑，轮播到最后一张时正常回到第一张，避免数组越界

修正后的可运行完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Page title</title>
 <link rel="stylesheet" href="4.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
  /* 基础轮播布局样式，可根据自己的设计需求调整 */
  .slides {
    position: relative;
    width: 100%;
    height: 500px;
  }
  .slides img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
 </style>
</head>
<body>
 <div class="landing">
  <div class="slides">
   <img src="effiel tower.png" alt="埃菲尔铁塔">
   <img src="Capetown.png" alt="开普敦">
   <img src="china mountain.png" alt="中国山岳">
  </div>
 </div>

 <script>
window.onload = function(){
  var index = 0;
  show();
  function show(){
    var i;
    // 修正选择器，匹配所有需要轮播的图片
    var slides = document.querySelectorAll(".slides img");
    // 先隐藏所有图片
    for(i=0;i<slides.length; i++){
      slides[i].style.display ="none"
    }
    
    index = index + 1;
    // 边界判断：超过图片总数时回到第一张
    if(index > slides.length){
      index = 1;
    }
    
    // 显示当前轮播项
    slides[index-1].style.display = "block";
    setTimeout(show, 1500);
  }
}
 </script>
</body>
</html>

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