滚动幻灯片中的关键帧关闭

Question

我找到了我想在我的网站上使用的滚动幻灯片的代码，但它是为 6 张图片设计的，当我复制代码并用我的 14 张图片替换时，只有 6 张图片在滚动。我认为它与关键帧有关，但我对它们了解得不够多，无法修改。我将容器 id 的宽度从 1000px 修改为 500px。此外，出现在卷轴下方的图像也发生了一些有趣的事情。如果有人能告诉我如何让 14 幅图像无缝滚动，我将不胜感激。谢谢。

html {
  background-color: white;
}

body {
  width: 1300px;
  margin: 0 auto 0;
}

#container {
  width: 500px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}

.photobanner {
  height: 233px;
  width: 3550px;
  margin-bottom: 80px;
}

.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;
}

@keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-moz-keyframes bannermove {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-webkit-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-ms-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

@-o-keyframes "bannermove" {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: -2125px;
  }
}

<section class="flex-container">
  <div id="container">
    <!-- Each image is 480px by 270px -->
    <div class="photobanner">
      <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_all_stars.jpg" alt="network reality all stars" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
      <img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" /></div>
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
    <img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
  </div>
</section>

Answer 1

从您上面的代码中，很明显计算不匹配，因此我们需要对此进行调整，以适应您的要求的 14 张图像。

第一个问题是 photobanner 类的 div 与图像的高度不同，因此我将高度更正为 270px，与图像的高度相同。此外，默认情况下，图像之间的空间很小，要解决此问题，您需要使用以下 CSS 属性（font-size:0px）设置这些图像的父级，并且空间将消失，因为图像之间的空间存在问题.我正在使用边距 (margin-right:2px) 之间添加空格。

.photobanner {
    height: 270px;
    width: max-content;
    margin-bottom: 80px;
    font-size:0px;
}

img{
  margin-right:2px;
}

每张图片都有尺寸。 （宽度：480px，高度：270px）

因此，photobanner 类的 div 包含所有图像。每个图像之间都有一个边距。大约是 4px。

所以计算将是。

total width = ( width of image * 14 ) + ( margin * 14 )
   6748     = (       480      * 14 ) + (   2    * 14 )

所以我们可以将photobanner div 的宽度设置为6748px。

那么最后我们设置动画margin-left，计算如下。

每个图像都有一个margin 大约2，我们也应该在最后一个图像结束时停止滚动到容器的右侧。因此计算将是。

margin-right = ( width of image * 13 ) + ( margin * 14 )
    6268     = (       480      * 13 ) + (   2    * 14 )

以下是代码的工作示例。

Plunkr Demo

请随时根据您的要求对代码进行调整。