爲什麼我的圖像滑塊上有白色頁面？

Question

所以我對編碼知之甚少，並試圖製作一個html和css only滑塊。我能夠創建一個真正基本的幻燈片與三個圖像。然而，由於某種奇怪的原因，代碼在第三個之後放置了一個白色圖像。誰能告訴我我做錯了什麼？爲什麼最後一張圖像後有白頁？另外如果可能的話，我怎樣才能做到這一點，以便在最後一張圖片縮小到第一張時，它看起來並不起伏？

@keyframes slider { 
 

 
0% { 
 
    left: 0; 
 
} 
 

 
20% { 
 
    left: 0; 
 
} 
 

 
25% { 
 
    left: -100%; 
 
} 
 

 
45% { 
 
    left: -100%; 
 
} 
 

 
50% { 
 
    left: -200%; 
 
} 
 

 
70% { 
 
    left: -200%; 
 
} 
 

 
75% { 
 
    left: -300%; 
 
} 
 

 
95% { 
 
    left: -300%; 
 
} 
 

 
100% { 
 
    left: -400%; 
 
} 
 

 
} 
 

 
#slider { 
 
    overflow: hidden; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
#slider figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
#slider figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s infinite slider; 
 
}

<div id="slider"> 
 
    <figure> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg"> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg"> 
 
    </figure> 
 
</div> 
 

 

 
</body> 
 
</html>

Answer 1

既然你只有3張圖片，如果你把left: -300%;最後一個圖像是從容器中。

這裏是修復：

@keyframes slider { 
 

 
0% { 
 
    left: 0; 
 
} 
 

 
20% { 
 
    left: 0; 
 
} 
 

 
25% { 
 
    left: -100%; 
 
} 
 

 
45% { 
 
    left: -100%; 
 
} 
 

 
50% { 
 
    left: -200%; 
 
} 
 

 
70% { 
 
    left: -200%; 
 
} 
 

 
75% { 
 
    left: 0; 
 
} 
 

 
95% { 
 
    left: 0; 
 
} 
 

 
100% { 
 
    left: 0; 
 
} 
 

 
} 
 

 
#slider { 
 
    overflow: hidden; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
} 
 

 
#slider figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 

 
#slider figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s infinite slider; 
 
}

<div id="slider"> 
 
    <figure> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg"> 
 
    <img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg"> 
 
    </figure> 
 
</div>

注意，當你在最後一張圖片上 - 下一張幻燈片（到第一個）將無法從向右左邊。爲了獲得這種視覺效果，你將不得不使用JavaScript。