2016-09-16 77 views
0

这是使用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; 
} 
+0

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

+1

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

+0

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

回答

0

呀,我定你的幻灯片问题。现在运行非常顺利检查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 &让我知道它是否修复您的问题

相关问题