Question

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

Answer 1

是的，我修复了你的幻灯片问题。现在运行非常顺利检查codepen here。

你必须记住的CSS滑块的主要内容是你给出的width＆amp;在给定宽度内滑动不同幻灯片的方式。这一切都是为了保持宽度和宽度之间的平衡。完成覆盖宽度的一个周期所花费的时间。

在你的情况下，你有5张图片但是你的@keyframes已经被打破了太多级别（级别取决于你每张图片的宽度）。

我收录了一张图片，展示了它是如何工作的。打破了你的@keyframes，如下所示：

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

检查this codepen＆amp;如果它解决了您的问题，请告诉我

最后一张图片滑得太快了

1 个答案: