CSS淡出延迟？
CSS淡出延迟？
提问于 2018-06-20 07:41:02
我正在尝试为我的网站创建一个幻灯片横幅，我的想法是使用z-index将它们堆叠起来，然后让顶部的横幅淡出以显示下面的横幅，然后将其自身移动到堆栈的底部。
我没有完全理解CSS淡入淡出规则是如何工作的，而且它们似乎是一次淡出堆栈中的所有图像，而不仅仅是顶部的图像。有没有一种优雅的方法可以让fade类跟随堆栈的顶部图像，这样它只会在顶部淡出？
任何帮助都将不胜感激。
var slidePosition = 0;
fadeSlides();
function fadeSlides() {
var i;
var slide = document.getElementsByClassName("mySlides");
for (i = 0; i < slide.length; i++) {
slide[i].style.zIndex = slide[i].style.zIndex + 1;
slide[i].style.opacity = "1";
}
slidePosition++;
if (slidePosition > slide.length) {
slidePosition = 1
}
slide[slidePosition - 1].style.opacity = "0";
slide[slidePosition - 1].style.zIndex = "0";
setTimeout(fadeSlides, 3500);
}.slideshow-container {
width: 100%;
position: relative;
}
.mySlides {
opacity: 1;
position: absolute;
}
.fade {
animation: fade 1s infinite;
}
@keyframes fade {
0% {
opacity: 1
}
100% {
opacity: 0
}
}<div class="slideshow-container">
<div class="mySlides fade" style="z-index: 5">
<img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 4">
<img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 3">
<img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 2">
<img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 1">
<img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 0">
<img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-06-20 07:57:10
只需使用transition即可，因为不需要使用animation，因为您将使用JS更改属性
var slidePosition = 0;
fadeSlides();
function fadeSlides() {
var i;
var slide = document.getElementsByClassName("mySlides");
for (i = 0; i < slide.length; i++) {
slide[i].style.zIndex = slide[i].style.zIndex + 1;
slide[i].style.opacity = "1";
}
slidePosition++;
if (slidePosition > slide.length) {
slidePosition = 1
}
slide[slidePosition - 1].style.opacity = "0";
slide[slidePosition - 1].style.zIndex = "0";
setTimeout(fadeSlides, 3500);
}.slideshow-container {
width: 100%;
position: relative;
}
.mySlides {
opacity: 1;
position: absolute;
}
.fade {
transition: opacity 1s, z-index 0s 1s;
}<div class="slideshow-container">
<div class="mySlides fade" style="z-index: 5">
<img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 4">
<img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 3">
<img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 2">
<img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 1">
<img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
</div>
<div class="mySlides fade" style="z-index: 0">
<img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50938302
复制相关文章
相似问题