为什么我的图片滑块上有白页？

Question

所以我对编码知之甚少，并试图制作一个仅限html和css的滑块。我能够用三张图片创建一个非常基本的幻灯片。但是，代码在第三个之后放置了一个白色图像，原因有些奇怪。谁能告诉我我做错了什么？为什么最后一张图片后面有白页？另外，如果可能的话，我怎样才能使它在最后一张图像之后切割回第一张图像时不会显得不连贯？

@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

如果您放置{ partition - 20 = { startKey = 1980865.0, endKey = 2069192.0, partitionSize = 72, partitionId = 20, partitionRecordCount = 88328 }, partition - 10 = { st artKey = 938305.0, endKey = 1042560.0, partitionSize = 72, partitionId = 10, partitionRecordCount = 104256 }, partition - 11 = { startKey = 1042561.0, endKey = 1146816.0, partitionSize = 72, partitionId = 11, partitionRecordCount = 104256 }, partition - 12 = { startKey = 1146817.0, endKey = 1251072.0, partitionSize = 72, partitionId = 12, partitionRecordCount = 104256 }, partition - 13 = { startKey = 1251073.0, endKey = 1355328.0, partitionSize = 72, partitionId = 13, partitionRecordCount = 104256 }, par tition - 14 = { startKey = 1355329.0, endKey = 1459584.0, partitionSize = 72, partitionId = 14, partitionRecordCount = 104256 }, partition - 15 = { startKey = 1459585.0, end Key = 1563840.0, partitionSize = 72, partitionId = 15, partitionRecordCount = 104256 }, partition - 16 = { startKey = 1563841.0, endKey = 1668096.0, partitionSize = 72, p artitionId = 16, partitionRecordCount = 104256 }, partition - 17 = { startKey = 1668097.0, endKey = 1772352.0, partitionSize = 72, partitionId = 17, partitionRecordCoun t = 104256 }, partition - 18 = { startKey = 1772353.0, endKey = 1876608.0, partitionSize = 72, partitionId = 18, partitionRecordCount = 104256 }, partition - 19 = { startKey = 1876609.0, endKey = 1980864.0, partitionSize = 72, partitionId = 19, partitionRecordCount = 104256 }, partition - 1 = { startKey = 1.0, endKey = 104256.0, partitionSize = 72, partitionId = 1, partitionRecordCount = 104256 }, partition - 2 = { startKey = 104257.0, endKey = 208512.0, partitionSize = 72, partitionId = 2, partitionRecordCou nt = 104256 }, partition - 3 = { startKey = 208513.0, endKey = 312768.0, partitionSize = 72, partitionId = 3, partitionRecordCount = 104256 }, partition - 4 = { startKey = 3127 69.0, endKey = 417024.0, partitionSize = 72, partitionId = 4, partitionRecordCount = 104256 }, partition - 5 = { startKey = 417025.0, endKey = 521280.0, partitionSize = 7 2, partitionId = 5, partitionRecordCount = 104256 }, partition - 6 = { startKey = 521281.0, endKey = 625536.0, partitionSize = 72, partitionId = 6, partitionRecordCount = 104256 }, partition - 7 = { startKey = 625537.0, endKey = 729792.0, partitionSize = 72, partitionId = 7, partitionRecordCount = 104256 }, partition - 8 = { startKey = 729793 .0, endKey = 834048.0, partitionSize = 72, partitionId = 8, partitionRecordCount = 104256 }, partition - 9 = { startKey = 834049.0, endKey = 938304.0, partitionSize = 72, partitionId = 9, partitionRecordCount = 104256 } } Total no. of Partitions: 20 最后一张图片不在容器中，则只有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;
}

  

请注意，当您在最后一张图片上时 - 下一张幻灯片（到第一张图片）将不会从右侧到左侧。要获得该视觉效果，您必须使用javascript。