轮播图<a>元素Hover与JS交互失效问题求助

问题根源及修复步骤 #

1. 父容器层级过低导致鼠标事件被遮挡 #

#top元素设置了z-index: -100，会让整个轮播容器处于页面最底层，即便箭头设置了更高的z-index，也无法接收鼠标悬停和点击事件。
修复代码：

#top {
  position: relative;
  z-index: 1; /* 调整为正数层级 */
  width: 100%;
}

2. 函数名拼写错误导致点击无响应 #

HTML中箭头的onclick事件调用的是plusSides()，但JavaScript中定义的函数名是plusSlides()，名称不匹配导致点击逻辑无法触发。
修复代码：

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

3. 额外优化（可选） #

• 指示器样式修正：原CSS中.active .dot:hover选择器逻辑错误，调整后确保激活状态和悬停状态的指示器样式正常：

.dot.active, .dot:hover {
  background-color: #717171;
}

• 淡入淡出动画修正：原动画结束时透明度仅为0.1，会导致轮播图越来越暗，调整为1实现正常淡入效果：

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

修改后的完整代码片段 #

JavaScript #

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')
  let dots = document.getElementsByClassName('dot')
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none'
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(' active', '')
  }
  slides[slideIndex - 1].style.display = 'block'
  dots[slideIndex - 1].className += " active" // 修正：给指示器添加active类，原代码错误地加到了轮播图上
}

CSS #

#top {
  position: relative;
  z-index: 1;
  width: 100%;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  z-index: 100;
}

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

#top a:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

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

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

HTML #

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Bevan&display=swap" rel="stylesheet">
</head>

<body>
  <div id="page">
    <div class="toggle-btn" onclick="toggleFunction()">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <nav id="header">
      <img src="pantherlogo.png" alt="Panthers Logo" id="logo">
      <div id="navbar">
        <h3><a href="index.html">HOME</a></h3>
        <h3><a href="news.html">NEWS</a></h3>
        <h3><a href="team.html">TEAMS</a></h3>
        <h3><a href="contacts.html">CONTACTS</a></h3>
      </div>
    </nav>
    <div id="top">
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg">
        <div id="motto">
          <h1>Restore the pride.</h1>
        </div>
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg">
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg">
      </div>
      <div class="mySlides fade">
        <img src="https://placehold.co/600x400" alt="football" id="footballimg">
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
      <span class="dot" onclick="currentSlide(4)"></span>
    </div>
  </div>
  <div id="main">
    <div class="slide-up">
      <div class="container reveal">
        <div class="text-box">
          <h1>Home of the Panthers</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Pride.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Tradition.</h1>
        </div>
      </div>
      <div class="text-container reveal">
        <div class="text-box">
          <h1>Commitment.</h1>
        </div>
      </div>
    </div>

  </div>
  <div id="footer">
    <div id="map" class="footercontent">
      <h3>Sitemap</h3>
      <h4><a href="index.html">Home</a></h4>
      <h4><a href="news.html">News</a></h4>
      <h4><a href="team.html">Teams</a></h4>
      <h4><a href="contacts.html">Contacts</a></h4>
    </div>
    <div id="contactus" class="footercontent">
      <h3>Contact Us</h3>
      <h4>Email</h4>
      <h4>Twitter</h4>
      <h4>Instagram</h4>
      <h4>Facebook</h4>
    </div>
    <div id="copyright">
      <h5>Copyright</h5>
    </div>
  </div>
  </div>
  <script src="script.js"></script>
  <script src="imageslide.js"></script>

</body>

</html>

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