无限水平滚动图像循环？

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;

}

}

Answer 1

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

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

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

由于是绝对位置，所以需要设置#container.

如果您不能添加两次图像，则可以根据最后添加的图像数量来调整百分比，该百分比必须足以填充 .csv 文件的可见空间#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>

Answer 2

希望这个能帮助你

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 3
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container-fluid">
  <div class="owl-carousel owl-theme">
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>