最後一張圖片幻燈片太快

這是使用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

最後一張圖片幻燈片太快

回答

相關問題