如何让图像横幅垂直滚动？答案

【问题标题】：How to get a banner of images scroll vertically?如何让图像横幅垂直滚动？
【发布时间】：2016-02-16 12:38:09
【问题描述】：

我正在尝试使用我在网上找到的这段代码来制作移动图像横幅，但我的问题是我似乎无法让它垂直滚动。现在，只有第一张图片在移动，我不知道为什么。 Here 是原始代码的链接。

这是我目前所拥有的。

CSS：

<style>
  body {
    background: url('images/dark_geometric.png');
  }
  #container {
    width: 800px;
    height: 705px; 
    overflow: hidden;
  }
  .photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
  }
  /*keyframe animations*/
  .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-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-moz-keyframes bannermove {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-webkit-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-ms-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
  @-o-keyframes "bannermove" {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -2125px;
    }
  }
</style>

HTML：

<body>
  <div id="container">
    <div class="photobanner">
      <img class="first" src="images/rsz_event1.png" alt="">
      <img src="images/rsz_event2.png" alt="">
      <img src="images/rsz_event3.png" alt="">
      <img src="images/rsz_event4.png" alt="">
      <img src="images/rsz_event5.png" alt="">
      <img src="images/rsz_event6.png" alt="">
      <img src="images/rsz_event7.png" alt="">
      <img src="images/rsz_event8.png" alt="">
      <img src="images/rsz_event1.png" alt="">
      <img src="images/rsz_event2.png" alt="">
      <img src="images/rsz_event3.png" alt="">
      <img src="images/rsz_event4.png" alt="">
    </div>
  </div>
</body>

如果有人能帮助我指明正确的方向，我将不胜感激。刚开始学习。

【问题讨论】：

标签： css css-animations banner keyframe

【解决方案1】：

图像不是块级元素，因此如果您需要让图像在另一个下方显示并使用margin-top 属性对其进行动画处理，那么您应该为其添加display: block 设置。

链接的示例不需要这个，因为这是一个水平滚动，默认情况下所有这些图像元素都会一个接一个地排列。

body {
  background: url('http://lorempixel.com/600/400/abstract/1');
}
#container {
  width: 800px;
  height: 600px; /* modify as per your need, would be better to set it to multiples of image height */
  overflow: hidden;
}
.photobanner {
  width: 3550px;
  height: 200px; /* modify as per your need, this is the height of each image */
  margin-bottom: 80px;
}
.first {
  animation: bannermove 30s linear infinite;
}
img {
  display: block;
}
@keyframes bannermove {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: -1600px; /* container height - (no. of images - 1) * image height */
  }
}

<div id="container">
  <div class="photobanner">
    <img class="first" src="http://lorempixel.com/800/200/nature/1" alt="">
    <img src="http://lorempixel.com/800/200/nature/2" alt="">
    <img src="http://lorempixel.com/800/200/nature/3" alt="">
    <img src="http://lorempixel.com/800/200/nature/4" alt="">
    <img src="http://lorempixel.com/800/200/nature/5" alt="">
    <img src="http://lorempixel.com/800/200/nature/6" alt="">
    <img src="http://lorempixel.com/800/200/nature/7" alt="">
    <img src="http://lorempixel.com/800/200/nature/8" alt="">
    <img src="http://lorempixel.com/800/200/nature/1" alt="">
    <img src="http://lorempixel.com/800/200/nature/2" alt="">
    <img src="http://lorempixel.com/800/200/nature/3" alt="">
    <img src="http://lorempixel.com/800/200/nature/4" alt="">
  </div>
</div>

【讨论】：

哦，哇，我不知道你需要明确地说 display: block。我以为你可以将它们垂直排列。非常感谢！