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

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，计算如下。

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

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

下面是代码的工作示例。

Plunkr Demo

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