关闭滚动幻灯片的关键框架

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

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