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

我不确定您要达到的目标，但听起来好像您想要两个“轮播”，每个一次显示一张图像。每次将鼠标悬停在该图像上时，该轮播中的下一个图像都应该出现，或者再次从第一个图像开始。是吗？

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

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>

示例中没有图像，但是您可以从所显示的替代文本中获得灵感。

通过图片隐藏和显示幻灯片的图片-Javascript

1 个答案: