所以我尝试在我的网站上创建一个无限滚动动画，但是我真的很挣扎。原来的教程在这里，使用了6张图片，4张在最后重复，以使过渡无缝。
https://designshack.net/articles/css/infinitephotobanner/
问题是，当我添加更多的图片，动画不工作。我知道这是因为我需要增加宽度和其他变量。在原来的，它看起来像因为她有10张图片（6个原始和4个重复），每个是350px，并且照片横幅是3550px，公式应该是10倍的图像宽度加上50px的边距。所以我试着这样开始。
我一直在不停地调整横幅移动的距离，但是教程并没有解释我需要如何计算横幅移动的距离，而不使其循环。网上有很多人都有同样的问题，除了复制和粘贴别人的代码，我还没有找到任何明确的答案。有没有更好的指南，我可以使用，或者谁能告诉我需要调整哪些变量
另外，如果我将容器宽度从1000px更改为更大的值，我是否也必须调整其他数值？如果是这样，我如何计算？肯定有比重新查看循环1000次更好的方法，每次都稍微更改数值，直到像素完美排列？如果是这样，这将花费我非常长的时间，因为我的循环是如此之长。
如果有帮助的话，每个图像是800px乘308px。这里是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;
}
}
3条答案
按热度按时间lzfw57am1#
这个解决方案不需要javascript代码。
photobanner具有绝对位置，因此它在正常流之外，并且将white-space设置为nowrap创建了一个水平容器，其中所有图像都在该容器内。为了创建无限循环，我插入了4张图片两次，动画将
photobanner容器从0移动到维度的-50%。由于绝对位置，需要设置
#container的高度。如果不能添加两次图像，可以根据最后添加的图像数量来调整百分比，这必须足以填充
#container的可见空间。添加这些规则后，鼠标悬停时动画停止，图像可以手动滚动：
omqzjyyz2#
希望这个能帮到你
2eafrhcq3#
这是我的建议-只CSS，但使用CSS变量。
有了这个，你可以把图像或任何内容，直到块高度是相同的。也可以控制图像之间的空间。
重要提示-您需要填充整个屏幕宽度。当元素比可用屏幕短时，它将不起作用。
同样重要的是-你需要把所有可见的元素放在整个集合之后。我的意思是：
让我们说，当我们有7个项目，但我们希望只有3个是可见的一次（不超过这一点），所以在这7个项目之后，我们需要把前3个项目的副本从列表中。