javascript - 在 z-index 上使用 setInterval 一张一张地显示图像

Question

我正在尝试在 Javascript 中使用 setInterval 来增加图像的 z-index，从而在将鼠标悬停在标题上时显示图像并将每个图像一个一个地放在前面。它目前只将一张图片带到前面......

这是JS：

const imageArea = document.querySelector('div.images')
const images = imageArea.querySelectorAll('img')
const performanceTag = document.querySelector('a.performance')

let currentImage = 0
let zCount = 0

performanceTag.addEventListener('mouseover', function() {
  
  setInterval(function() {
    currentImage =+ 1
    zCount =+ 1
  }, 1000)
  

    images[currentImage].style.zIndex = `${zCount}`
})

这是 HTML：

<section class="container">
  <section class="column1">
    <a href="#" class="performance 1">Performance One</a>
    <a href="#" class="performance 2">Performance Two</a>
    <a href="#" class="performance 3">Performance Three</a>
  </section>

  <section class="column2">
    <div class="images">
      <img src="cat-questions-08.gif" />
      <img src="cat-begging-cute.gif" />
      <img src="1800x1200_why_cats_sneeze_ref_guide.jpg" />
      <img src="cat-sad-cat.gif" />
      <img src="131117-wd-cats.jpg" />
    </div>
  </section>

这是相关的CSS：

a.performance {
  display: block;
  margin-bottom: 40px;
  color: #000;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 1px;
}

section.column2 {
  position: relative;
  margin: 40px;
}

img  {
  position: absolute;
  width: 450px;
  
  z-index: 0;
}

提前致谢

标签： javascriptcssdom-eventssetintervalz-index