html - 上一张图片滑动太快

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 slider ，您必须牢记的主要事情是您指定的 width 以及在给定宽度内滑动不同幻灯片的方式。这一切都是为了在宽度和完成覆盖宽度的一个周期所需的时间之间保持平衡。

在您的情况下，您有 5 张图像，但将 @keyframes 分成了太多级别(级别取决于每个图像的宽度)。

我已经包含了一张图片，展示了它是如何工作的，并破坏了你的@keyframes，如下所示:

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

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