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

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 张图像。

第一个问题是 div 和 class photobanner 的高度与图片不一样，所以我将高度更正为 270px，与图片。此外，默认情况下图像之间会有一个小 space，要解决此问题，您需要使用以下 CSS 属性(font-size:0px) 和space 将消失，因为 space 图像之间存在问题。我在使用边距 (margin-right:2px) 之间添加 space。

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

img{
  margin-right:2px;
}

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

因此 div 和 class photobanner 包含所有图像。每个图像之间都有一个边距。大约 4px.

所以计算会是。

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

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

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

每张图片的 margin 约为 2，我们还应该在最后一张图片到达容器右侧时停止滚动。因此计算将是。

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

下面是代码的工作示例。

Plunkr Demo

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

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

keyframes off in scrolling slideshow

html

css

scroll

slideshow

css-animations