逐图隐藏和显示幻灯片 - Javascript

Question

我正在使用 html/css/javascript 创建幻灯片。它应该看起来像显示新图像的图像轨迹，因为最后显示的图像悬停在上面。但我只能让第一张图片出现。我写的用于继续幻灯片效果的功能无效。函数中缺少什么？

    <div class = "line1">

        <img class = "crash" src = "../Pics/January_2019/crash2.jpg" alt = "Another picture you can't see" onmouseover = "mover ()" onmouseout = "mout ()">

        <img class = "crash" src = "../Pics/January_2019/crash3.jpg" alt = "You must be blind" onmouseover = "mover ()" onmouseout = "mout ()">

        <img id = "second" src = "../Pics/January_2019/screen.jpg" alt = "It's a mirror" >

    </div>

    <br></br>

    <div class = "line2">

        <img class = "crash" src = "../Pics/January_2019/crash4.jpg" alt = "Or we're not linking up" onmouseover = "mover ()" onmouseout = "mout ()">

        <img class = "crash" src = "../Pics/January_2019/crash5.jpg" alt = "Still checkin?" onmouseover = "mover ()" onmouseout = "mout ()">

        <img id = "third" src = "../Pics/January_2019/NYbridge.jpg" alt = "A bridge you can't see">

    </div>

css

.crash {
display: none;
}

.brash {
display: inline-flex;
width: 21%;
padding: 0.75%;
margin: 0.75%;
}   

.line1, .line2 {
display: flex;
}

js

let shine = document.querySelectorAll('.crash');

const glide = document.querySelector('#first');

let count;

如果我指定计数 (=) 而不是比较它 (==)，则会弹出第一张图片幻灯片。否则，当我将鼠标悬停在第一张图片上时，什么都不会显示。

mover = function () {

if (count == 4) {

    count = 0;
}

shine[count].classList.replace('crash', 'brash');

}   


mout = function => {setTimeout (removefunc, 200)}



removefunc = function () {

if (count >= 1) {

    shine[count].classList.replace ('brash', 'crash');
}

count+=1;
}

glide.onmouseover = mover;

glide.onmouseout = mout;

shine[0].onmouseover = mover;

shine[0].onmouseout = mout;

Answer 1

我不能 100% 确定您要实现的目标，但听起来您需要两个“轮播”，每次显示一张图像。每次悬停该图像时，该轮播中的下一个图像应该出现，或者再次从第一个图像开始。对吗？

如果是这样，我认为您的代码可以更短且更简单。就这样……

document.querySelectorAll('img').forEach((img) => {
  img.addEventListener("mouseenter", function(event) {
    if (img.classList.contains('hold')) {
      img.classList.remove('hold')
      return false
    }
    let index = Array.from(img.parentNode.children).indexOf(img)
    let nextImg = img.parentNode.querySelectorAll('img')[index + 1]
    let firstImg = img.parentNode.querySelectorAll('img')[0]

    img.classList.remove('active')
    if (nextImg) {
      nextImg.classList.add('active', 'hold')
    } else {
      firstImg.classList.add('active', 'hold')
    }
  })
})

.line img {
  width: 21%;
  padding: 0.75%;
  margin: 0.75%;
  display: none;
}

.line img.active {
  display: block;
}

<div class="line">
  <img class="active" src="../Pics/January_2019/crash2.jpg" alt="Another picture you can't see" />
  <img src="../Pics/January_2019/crash3.jpg" alt="You must be blind" />
  <img src="../Pics/January_2019/screen.jpg" alt="It's a mirror" />
</div>
<div class="line">
  <img class="active" src="../Pics/January_2019/crash4.jpg" alt="Or we're not linking up" />
  <img src="../Pics/January_2019/crash5.jpg" alt="Still checkin?" />
  <img src="../Pics/January_2019/NYbridge.jpg" alt="A bridge you can't see" />
</div>

示例中没有图像，但您可以从显示的替代文本中获得想法。