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％淡化为0到22％，然后从95％至100％。但不幸的是，我要去圣诞大餐，我现在不能尝试。 ;）

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我想制作幻灯片

1 个答案: