Javascript CSS衰减延迟？

我正在尝试为我的网站创建一个幻灯片横幅，我的想法是使用z-index将它们堆叠起来，然后让顶部的一个淡出以显示下面的一个，然后将其自身移动到堆栈的底部

我不完全理解CSS淡入淡出规则是如何工作的，而且看起来它们一次淡入堆栈中的所有图像，而不仅仅是顶部的图像。有没有一种优雅的方法使淡入类跟随堆栈的顶部图像，这样它只有在位于顶部时才会淡出

任何帮助都将不胜感激

var slidePosition=0；
fadeSlides（）；
函数fadeSlides（）{
var i；
var slide=document.getElementsByClassName（“mySlides”）；
对于（i=0；i滑动长度）{
slidePosition=1
}
幻灯片[slidePosition-1]。style.opacity=“0”；
幻灯片[slidePosition-1]。style.zIndex=“0”；
设置超时（fadeSlides，3500）；
}

.slideshow容器{
宽度：100%；
位置：相对位置；
}
迈斯利德斯先生{
不透明度：1；
位置：绝对位置；
}
.褪色{
动画：淡入1秒无限；
}
@关键帧淡入淡出{
0% {
不透明度：1
}
100% {
不透明度：0
}
}

---

只需使用

转换

，因为不需要使用

动画

，因为您正在使用JS更改属性

var slidePosition=0；
fadeSlides（）；
函数fadeSlides（）{
var i；
var slide=document.getElementsByClassName（“mySlides”）；
对于（i=0；i滑动长度）{
slidePosition=1
}
幻灯片[slidePosition-1]。style.opacity=“0”；
幻灯片[slidePosition-1]。style.zIndex=“0”；
设置超时（fadeSlides，3500）；
}

.slideshow容器{
宽度：100%；
位置：相对位置；
}
迈斯利德斯先生{
不透明度：1；
位置：绝对位置；
}
.褪色{
过渡：不透明度1s，z指数0s 1s；
}

---

Temani Afif的答案将有助于让您当前的方法看起来不错，但更简单的答案是，正如其他人所评论的，一次只在一张幻灯片上切换一个类

您可以使用CSS

transition

属性更简单地执行此操作，而无需涉及

@关键帧

：为所有幻灯片提供一个transition属性，然后使用

fade

类切换

不透明度

。这样，当

fade

类从一张幻灯片切换到另一张幻灯片时，旧幻灯片将淡出，而新幻灯片将同时淡入

您还可以通过不为每张幻灯片使用单独的

z-index

来进一步简化事情。不要试图按照特定的顺序将幻灯片堆叠在一起，只需担心将正确的幻灯片移动到幻灯片的顶部，也不要担心下面的其他幻灯片，因为您无论如何都看不到它们

fadeSlides（）；
函数fadeSlides（）{
var slide=document.getElementsByClassName（“淡入淡出”）[0]；
var nextSlide=slide.nextElementSibling；
if（nextSlide）{
nextSlide.classList.add（'fade'）；
}否则{
document.getElementsByClassName（'mySlides'）[0].classList.add（'fade'）；
}
幻灯片.classList.remove（'fade'）；
设置超时（fadeSlides，3500）；
}

.slideshow容器{
宽度：100%；
位置：相对位置；
}
迈斯利德斯先生{
不透明度：0；
位置：绝对位置；
过渡：不透明度1000ms缓解；
}
.mySlides.fade{
不透明度：1；
z指数：1；
}

您可以尝试从所有图像中删除淡入淡出类，然后仅将其应用于您正在淡入淡出的图像。淡入淡出类将淡出淡出淡出应用于它附加到的任何元素，非常感谢！我知道一定有一个简单的解决方案，但我仍在学习，所以我自己无法完全获得这些。干杯我感谢你的帮助。我已经更新了代码，现在它运行得很好。在“var slide=document.getElementsByClassName（“fade”）[0]；”中，[0]在做什么？它只是在调用该节点中的第0个位置吗？既然代码在“fade”类上关闭和打开，它就不能在不引用特定实例的情况下调用它吗？另外，我不完全理解“if（nextSlide）”语句。如果没有附加条件，它到底是什么。是否有一个条件仅仅隐含在它存在的事实中？@user580248 So

document.getElementsByClassName

返回与您传递的选择器匹配的所有元素的数组（请注意，它是复数元素）。我们必须选择要将类添加到该数组中的哪个元素。但是我们假设页面上只有一个元素实际具有

fade

类，因此这意味着所讨论的元素将始终是索引为

0

的数组中的元素。

if（nextSlide）.

部分检查带有

fade

类的幻灯片的

nextElementSibling

是否存在–换句话说，我们是否在该集的最后一张幻灯片上。@user580248所以基本上我们是说，在带有fade类的幻灯片之后是否还有另一张幻灯片，为下一张幻灯片指定

fade

类，否则为第一张幻灯片指定

fade

类。（然后我们从旧幻灯片中删除

fade

类。）