一峰由PIC隐藏和显示的幻灯片 - 使用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>

图片均来自例如缺席，但你从显示ALT文本的想法。