我想做幻灯片

Question

这是幻灯片放映的html代码

<div id="slideshow">
    <img src="images/slideshow/1.png"/> 
    <img src="images/slideshow/2.png"/>
    <img src="images/slideshow/3.png"/>
    <img src="images/slideshow/4.png"/>
    <img src="images/slideshow/5.png"/>
    <img src="images/slideshow/6.png"/>
    </div>

这是我的 CSS

#slideshow{
    width:1100px;
    height:432px;
    position:relative;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:35px;
    overflow:hidden;}

#slideshow img{
    position:absolute;
    opacity:0;
    animation:move 30s infinite;}

@keyframes move{
    0%{opacity:1;}
    100%{opacity:1;}}

#slideshow img:nth-child(1){
    animation-delay:0s;}

#slideshow img:nth-child(2){
    animation-delay:5s;}

#slideshow img:nth-child(3){
    animation-delay:10s;}

#slideshow img:nth-child(4){
    animation-delay:15s;}

#slideshow img:nth-child(5){
    animation-delay:20s;}

#slideshow img:nth-child(6){
    animation-delay:25s;}

但是当显示最后一张图片时，幻灯片不会从第一张图片重新开始。 谁能告诉我怎么了？

Answer 1

问题是您从 1 不透明度淡化到 1 不透明度。改正之后就不行了，因为你在整个 30 秒的时间内淡入，所以当下一张图像开始时，一张图像没有完全淡入。最后，它不能很好地包裹起来，因为它开始时没有任何可见的图像。

这是我认为您尝试实现的固定版本。请注意，我在演示中使用了颜色而不是图像，但它们仍然是实际的图像元素，在您的情况下应该可以正常工作。

基本上是做什么的：

• 始终显示最后一张图像，但 z-index 为 -1，因此始终在其他图像后面可见。这使得该图像立即可见。
• 快速淡入（仅在图像可见的 5 秒中的一部分）
• 以相同的速度淡出，因此将 prio 淡出到最后一张图像实际上会显示最后一张。

诀窍是修复动画，使图像在动画中的正确时间淡入淡出。

我已经评论了动画中的各个帧来解释我为什么选择这些值。

可能更好：我认为应该也可以显示第一个，方法是将前 17% 的不透明度设置为 1，然后从 17% 到 22% 淡化到 0，然后再从 17% 淡化到 1 95% 到 100%。但不幸的是，我要去吃圣诞大餐，我现在不能试一试。 ;)

#slideshow{
    width:1100px;
    height:432px;
    position:relative;
    border:3px solid #404A7F;
    margin:auto;
    margin-top:35px;
    overflow:hidden;}

#slideshow img{
    position:absolute;
    opacity:0;
    animation:move 30s infinite;
    width: 300px; height: 200px; /* Demo only */
}

@keyframes move{
    /* Relevant information. You have 6 images, taking up 16.66% (say 17%) of the animation 
       time. So fading in needs to take place within this time.
       Also, to wrap properly, the last image is put in the back and is always visible, so to
       show that, you basically hide the prior one. Because of this, fading out has to 
       commence at 17% and has to have the same duration as the fading in. 
    */
  
    /* Start transparent */
    0%{opacity:0;}
    /* Move in a relatively short time to full opacity for a fade in effect. This can be anything from 0 to 17% */
    5%{opacity:1;}
    /* Stay at that level until after the next image has faded in at 100 / 6 ~ 17%. */
    17%{opacity:1;}
    /* Fade out at the same pace. This is needed for the animation to wrap seemlessly, 
       so 17% + 5% = 22% until full fade out */
    22%{opacity:0;}
    /* Stay there until the next round */
    100%{opacity: 0};
}

#slideshow img:nth-child(1){
    animation-delay:0s;
  background-color: red;
}

#slideshow img:nth-child(2){
    animation-delay:5s;
  background-color: orange;
}

#slideshow img:nth-child(3){
    animation-delay:10s;
  background-color: yellow;
}

#slideshow img:nth-child(4){
    animation-delay:15s;
  background-color: green;
}

#slideshow img:nth-child(5){
    animation-delay:20s;
  background-color: blue;
}

#slideshow img:nth-child(6){
    animation-delay:25s;
  background-color: purple;
  opacity: 1;
  z-index: -1;
}

<div id="slideshow">
    <img src="images/slideshow/1.png"/> 
    <img src="images/slideshow/2.png"/>
    <img src="images/slideshow/3.png"/>
    <img src="images/slideshow/4.png"/>
    <img src="images/slideshow/5.png"/>
    <img src="images/slideshow/6.png"/>
</div>