幻灯片开发遇问题：首图不显示+Cannot read properties of undefined错误

问题原因 #

• 控制台style错误：JS代码在DOM未完全加载时就执行，document.getElementsByClassName("mySlides")返回空集合，访问slides[slideIndex - 1].style时触发undefined错误。
• 第一张图片不显示：报错导致设置幻灯片显示的代码未执行，所有幻灯片保持CSS默认的display: none状态。

修复方案 #

1. 确保DOM加载完成后再执行幻灯片逻辑，避免获取不到元素。
2. 增加空值判断，防止无幻灯片元素时抛出错误。

修复后的完整代码 #

HTML #

<div class="hero-base">
  <div class="hero-image">
    <img src="/Reference/Images/WhatsApp Image 2022-09-17 at 11.39.17.jpeg" alt="profile pic">
    <div class="skillset slideshow-container">
      <h3>Tech Stack</h3>
      <div class="mySlides fade">
        <img src="/Reference/Images/html5.png" alt="HTML 5">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/CSS3.png" alt="CSS 3">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Javascript.png" alt="Javascript">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Adobe XD.png" alt="Javascript">
      </div>
      <div class="mySlides fade">
        <img src="/Reference/Images/Bootstrap.png" alt="Bootstrap">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
  </div>
</div>

CSS #

.hero-heading {
  position: absolute;
  color: var(--lightest--colour);
  margin-left: 30em;
  margin-top: -18.5em;
  padding: 1em;
}

.hero-heading h4 {
  text-align: center;
  margin-top: -1em;
}

.hero-image {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
}

.hero-image img {
  width: 51vw;
}

.mySlides {
  filter: invert(100%) sepia(63%) saturate(7474%) hue-rotate(77deg) brightness(98%) contrast(94%);
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--orange--colour);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.mySlides img {
  width: 48vw;
  height: 74.4vh;
  z-index: 2;
}

.slideshow-container {
  position: relative;
}

JavaScript #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    
    // 无幻灯片元素时直接返回，避免报错
    if (!slides.length) return;
    
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
  }

  // 将函数挂载到全局，确保HTML中的onclick能调用
  window.plusSlides = plusSlides;
  window.currentSlide = currentSlide;
});

问题截图 #

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