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

我正在用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>

js

如果我指定计数（=）而不是比较它（=），则会弹出第一张图像幻灯片。否则，当我将鼠标悬停在第一个图像上时，不会显示任何内容

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;

---

我不是100%确定你想要实现什么，但听起来你想要两个“转盘”，每个转盘一次显示一个图像。每次悬停该图像时，该旋转木马中的下一个图像应该出现，或者再次从第一个图像开始。对吗

如果是这样的话，我认为你的代码可以短得多，复杂得多。就像这样

document.querySelectorAll（'img'）.forEach（（img）=>{
img.addEventListener（“鼠标指针”，函数（事件）{
if（img.classList.contains（'hold'））{
img.classList.remove（'hold'）
返回错误
}
让index=Array.from（img.parentNode.children）.indexOf（img）
设nextImg=img.parentNode.querySelectorAll（'img'）[index+1]
让firstImg=img.parentNode.querySelectorAll（'img'）[0]
img.classList.remove（'active'）
如果（下一个）{
nextImg.classList.add（'active'，'hold'）
}否则{
firstImg.classList.add（'active'，'hold'）
}
})
})

.line img{
宽度：21%；
填充：0.75%；
利润率：0.75%；
显示：无；
}
.线路img.active{
显示：块；
}

---

我不是100%确定您想要实现什么，但听起来您想要两个“转盘”，每个转盘一次显示一个图像。每次悬停该图像时，该旋转木马中的下一个图像应该出现，或者再次从第一个图像开始。对吗

如果是这样的话，我认为你的代码可以短得多，复杂得多。就像这样

document.querySelectorAll（'img'）.forEach（（img）=>{
img.addEventListener（“鼠标指针”，函数（事件）{
if（img.classList.contains（'hold'））{
img.classList.remove（'hold'）
返回错误
}
让index=Array.from（img.parentNode.children）.indexOf（img）
设nextImg=img.parentNode.querySelectorAll（'img'）[index+1]
让firstImg=img.parentNode.querySelectorAll（'img'）[0]
img.classList.remove（'active'）
如果（下一个）{
nextImg.classList.add（'active'，'hold'）
}否则{
firstImg.classList.add（'active'，'hold'）
}
})
})

.line img{
宽度：21%；
填充：0.75%；
利润率：0.75%；
显示：无；
}
.线路img.active{
显示：块；
}

我知道你做了什么。不，我在想一个旋转木马，图像是在不同的分区中定位的。。。我正在尝试实现一些你放弃的东西，我只是觉得切换我拥有的类比添加和删除类更容易。你可以用你的新实现在你的问题中添加一个“有效”的代码片段，这样就可以更清楚地知道你想要的结果应该是什么。不，我在想一个旋转木马，图像是在不同的分区中定位的。。。我正在尝试实现一些你放弃的东西，我只是觉得切换我拥有的类比添加和删除类更容易。不工作在Yetyu你可以用新的实现在你的问题中添加一个“工作”代码片段，这样就可以更清楚地知道期望的结果应该是什么。

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;