Question

我正在尝试在 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;}
}

Answer 1

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>

为什么这张幻灯片中的第三张图片几乎跳过了？

1 个答案: