我正在尝试在 CSS 中创建幻灯片,并且可以正常工作,但是... 第 2 个图像比其他图像停留的时间更长,当它切换到第 3 个时,它立即切换到第 4 个。我不知道我的代码有什么问题,在纸面上,一切都应该正常。
HTML:
<div id="slideshow">
<div id="img1" class="gallery" style="background-image: url('https://i.pinimg.com/originals/7a/d6/80/7ad680c2aeaf6f89496a174c4e0a92db.jpg');"></div>
<div id="img2" class="gallery" style="background-image: url('https://cdn.wallpapersafari.com/69/19/nhvSi4.png');"></div>
<div id="img3" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/26081105/Look-Wide-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img4" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/23084736/God-is-Real-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img5" class="gallery" style="background-image: url('https://www.wallpaperuse.com/wallp/15-154924_m.jpg');"></div>
</div>
CSS:
#slideshow{
height: 60%;
}
.gallery{
display: flex;
align-items: center;
height: 60%;
width: 65%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 5;
animation: crossfade 25s -0s infinite;
animation-timing-function: ease-in-out;
}
#img2{
position: absolute;
z-index: 4;
animation: crossfade 25s -5s infinite;
animation-timing-function: ease-in-out;
}
#img3{
position: absolute;
z-index: 3;
animation: crossfade 25s -10s infinite;
animation-timing-function: ease-in-out;
}
#img4{
position: absolute;
z-index: 2;
animation: crossfade 25s -15s infinite;
animation-timing-function: ease-in-out;
}
#img5{
position: absolute;
z-index: 1;
animation: crossfade 25s -20s infinite;
animation-timing-function: ease-in-out;
}
@keyframes crossfade{
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
答案 0 :(得分:2)
z-index 加上时间的组合似乎有点混乱——例如,需要 5 秒才能使图像完全不透明,然后再显示 5 秒来淡化它——因此两者之间的时间重叠不相邻的图像。
此代码段消除了 z-index 的差异,因此所有幻灯片在这方面都是平等的(您是否需要设置 z-index 不在此问题的范围内,因为我们不知道完整的周围上下文)。它在 2 秒内带出图像并在两秒内取出,因此重叠只是与相邻的幻灯片。它还会将起点偏移 2 秒,因此在开始时会显示完全不透明的图像。
#slideshow {
height: 60%;
}
.gallery {
display: flex;
align-items: center;
height: 60%;
width: 65%;
background-position: center center;
background-size: cover;
}
#img1 {
position: absolute;
z-index: 1;
animation: crossfade 25s -2s infinite;
animation-timing-function: ease-in-out;
}
#img2 {
position: absolute;
z-index: 1;
animation: crossfade 25s -7s infinite;
animation-timing-function: ease-in-out;
}
#img3 {
position: absolute;
z-index: 1;
animation: crossfade 25s -12s infinite;
animation-timing-function: ease-in-out;
}
#img4 {
position: absolute;
z-index: 1;
animation: crossfade 25s -17s infinite;
animation-timing-function: ease-in-out;
}
#img5 {
position: absolute;
z-index: 1;
animation: crossfade 25s -22s infinite;
animation-timing-function: ease-in-out;
}
@keyframes crossfade {
0% {
opacity: 0;
}
8% {
opacity: 1;
/* fade in for 2 second */
}
20% {
opacity: 1;
/* stay fully visible for 3 seconds */
}
28% {
opacity: 0;
/* fade out for 2 second */
}
100% {
opacity: 0;
}
}
<div id="slideshow">
<div id="img1" class="gallery" style="background-image: url('https://i.pinimg.com/originals/7a/d6/80/7ad680c2aeaf6f89496a174c4e0a92db.jpg');"></div>
<div id="img2" class="gallery" style="background-image: url('https://cdn.wallpapersafari.com/69/19/nhvSi4.png');"></div>
<div id="img3" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/26081105/Look-Wide-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img4" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/23084736/God-is-Real-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img5" class="gallery" style="background-image: url('https://www.wallpaperuse.com/wallp/15-154924_m.jpg');"></div>
</div>