我正在尝试为我的网站创建一个幻灯片横幅,我的想法是使用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>
发布于 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>
https://stackoverflow.com/questions/50938302
复制相似问题