无限水平滚动图像循环？

Question

所以我想在我的网站上创建一个无限滚动动画，但我一直在努力。原始教程在这里，使用 6 张图片，最后重复 4 张，使过渡无缝。

https://designshack.net/articles/css/infinitephotobanner/

问题是当我添加更多图像时，动画不起作用。我知道那是因为我需要增加宽度和其他变量。在原来的情况下，由于她有 10 张图像（6 张原始图像和 4 张重复图像），每张都是 350 像素，而横幅广告是 3550 像素，因此公式应该是图像宽度的 10 倍加上边距的 50 像素。所以我试着这样做开始。

我一直在不停地调整横幅移动的幅度，但教程没有解释我需要如何计算横幅在不循环的情况下需要移动的距离。网上查了很多人有同样的问题，除了复制粘贴别人的代码，我没有找到任何明确的答案。有没有我可以使用的更好的指南，或者任何人都可以让我知道我需要调整哪些变量？

另外，如果我将容器宽度从 1000px 更改为更大的宽度，我是否也必须调整其他数字？如果是这样，我该如何计算？肯定有比重新观看循环 1000 次，并且每次都稍微改变数字直到像素完美排列更好的方法吗？如果是这样，那将花费我很长时间，因为我的循环太长了。

如果有帮助，每张图片都是 800 像素 x 308 像素。这是 HTML。任何帮助甚至是学习如何自己解决问题的资源都将不胜感激。

 <div id="container">

<div class="photobanner">

<img class="first" src="img1.png" alt="" />

<img src="img2.png" alt="" />

<img src="img3.png" alt="" />

<img src="img4.png" alt="" />

<img src="img5.png" alt="" />

<img src="img6.png" alt="" />

<img src="img7.png" alt="" />

<img src="img8.png" alt="" />

<img src="img9.png" alt="" />

<img src="img10.png" alt="" />

<img src="img11.png" alt="" />

<img src="img12.png" alt="" />

<img src="img13.png" alt="" />

<img src="img14.png" alt="" />

<img src="img1.png" alt="" />

<img src="img2.png" alt="" />

<img src="img3.png" alt="" />

<img src="img4.png" alt="" />

</div>

</div>

这是 CSS

* {margin: 0; padding: 0;}

body {

<!-- src: http://subtlepatterns.com/?p=1045 -->

background: url('dark_geometric.png');

}

#container {

width: 1000px;

overflow: hidden;

margin: 50px auto;

background: white;

}

/*header*/

header {

width: 800px;

margin: 40px auto;

}

header h1 {

text-align: center;

font: 100 60px/1.5 Helvetica, Verdana, sans-serif;

}

header p {

font: 100 15px/1.5 Helvetica, Verdana, sans-serif;

text-align: justify;

}

/*photobanner*/

.photobanner {

height: 233px;

width: 14450px;

margin-bottom: 80px;

}

/*keyframe animations*/

.first {

-webkit-animation: bannermove 30s linear infinite;

-moz-animation: bannermove 30s linear infinite;

-ms-animation: bannermove 30s linear infinite;

-o-animation: bannermove 30s linear infinite;

animation: bannermove 30s linear infinite;

}

u/keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-moz-keyframes bannermove {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-webkit-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-ms-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-o-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

原文由 user12810571 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此解决方案无需 javascript 代码即可工作。

photobanner 具有绝对位置，因此它在正常流和设置之外 white-space 到 nowrap 创建一个包含所有图像的水平容器。

为了创建无限循环，我插入了 4 个图像 两次，并且动画移动 photobanner 容器从 0 到 -50% 的维度。

由于是绝对位置，需要设置 #container 的高度。

如果您不能两次添加图像，您可以根据最后添加的图像数量来使用百分比，这必须足以填满 #container 的可见空间。

 #container {
  height:350px;
  position:relative;
  overflow:hidden;
}

.photobanner {
  position:absolute;
  top:0px;
  left:0px;
  overflow:hidden;
  white-space: nowrap;
  animation: bannermove 10s linear infinite;
}

.photobanner img {
  margin: 0 0.5em
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}

 <div id="container">
  <div class="photobanner">
    <img src="https://i.stack.imgur.com/xckZy.jpg" alt=""><img src="https://i.stack.imgur.com/CVgbr.jpg" alt=""><img src="https://i.stack.imgur.com/7c4yC.jpg" alt=""><img src="https://i.stack.imgur.com/RTiml.jpg" alt=""
><img src="https://i.stack.imgur.com/xckZy.jpg" alt=""><img src="https://i.stack.imgur.com/CVgbr.jpg" alt=""><img src="https://i.stack.imgur.com/7c4yC.jpg" alt=""><img src="https://i.stack.imgur.com/RTiml.jpg" alt="">
  </div>
</div>

原文由 Lety 发布，翻译遵循 CC BY-SA 4.0 许可协议