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（margin-right:2px）之间添加空格。

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

img{
  margin-right:2px;
}

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

因此，类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

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

滚动幻灯片中关键帧关闭

1 个答案: