【发布时间】：2020-08-17 23:56:09
【问题描述】：
所以我试图在我的网站上创建一个无限滚动动画，但我真的很挣扎。原始教程在这里，使用 6 张图片，最后重复 4 张以使过渡无缝。
https://designshack.net/articles/css/infinitephotobanner/
问题是当我添加更多图像时，动画不起作用。我知道那是因为我需要增加宽度和其他变量。在原版中，看起来因为她有 10 张图片（6 张原始图片和 4 张重复图片），每张 350 像素，并且照片横幅为 3550 像素，所以公式应该是图片宽度的 10 倍加上 50 像素的边距。所以我试着这样做开始。
我一直在调整横幅不断移动的幅度，但本教程没有解释我需要如何计算横幅在不循环的情况下需要移动的距离。在网上看有很多人有同样的问题，除了复制和粘贴某人的代码之外，我还没有找到任何明确的答案。有没有更好的指南可供我使用，或者任何人都可以让我知道我需要调整哪些变量？
另外，如果我将容器宽度从 1000 像素更改为更大的值，我是否也必须调整其他数字？如果是这样，我该如何计算？肯定有比重新观看循环 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;
}
}
【问题讨论】：
-
更好的方法是使用 owl-carousel.. 然后你可以轻松实现这一点