最后一张图片幻灯片太快

这是使用CSS的html幻灯片。但是，当它滑动到最后一张图像时（最后一张图像的持续时间太短），它会以太快的速度进行。所有其他的图像都很好。最后一张图片幻灯片太快

这里是HTML的一部分：

<div id="slider" style="text-align: center"> 
<figure> 
<img src="pics/img01.png"> 
<img src="pics/img02.png"> 
<img src="pics/img03.png"> 
<img src="pics/img04.png"> 
<img src="pics/img05.png"> 
</figure></div>

这里是CSS部分：

@keyframes slidy{ 
0%{left: 0%;} 
20%{left: 0%;} 
35%{left: -100%;} 
45%{left: -150%;} 
55%{left: -200%;} 
65%{left: -250%;} 
75%{left: -300%;} 
95%{left: -350%;} 
100%{left: -400%;} 
} 
body { margin: 100px left; } 
div#slider { overflow: hidden; } 
div#slider figure img { width: 20%; float: left; } 
div#slider figure { 
    position: relative; 
    width: 500%; 
    margin: 0; 
    left: 0; 
    text-align: left; 
    font-size: 0; 
    animation: 30s slidy infinite; 
}

来源

2016-09-16 Mohamed Lee

它更像是“闪烁”来第一个图像，但这很好，但最后一个图像显示的持续时间太短。 –

您的前四张图片卡住了过渡效果的一半，只有最后一张图片可以正常工作。不要使用负值，而应尝试使用过渡和动画效果 –

查看我的答案以获取更新。它现在运行非常顺利。 [Codepen]（http://codepen.io/PleaseBugMeNot/pen/zKBoap）。稍后会给予解释。 –

呀，我定你的幻灯片问题。现在运行非常顺利检查codepen here。

您必须牢记的关于CSS滑块的主要内容是您给&的width您在给定宽度内滑动不同幻灯片的方式。它的所有关于保持宽度&之间的平衡完成该覆盖宽度的一个周期所花费的时间。

在你的情况下，你有5个图像，但已打破@keyframes到太多的级别（级别取决于每个图像的宽度）。

我已经包含展示如何它的工作原理&打破了你的@keyframes的图像，如下图所示：

@keyframes slidy{ 
    0%{left: 0%;} 
    25%{left: -100%;} 
    50%{left: -200%;} 
    75%{left: -300%;} 
    100%{left: -400%;} 
}

检查this codepen &让我知道它是否修复您的问题

来源

2016-09-16 13:50:53

最后一张图片幻灯片太快

回答

相关问题