Question

我正在使用关键帧创建幻灯片。

我的问题在于，只有第一张图片实际显示，其他4张图片只会被忽略，因为您可以在我的代码段中看到。

我看过我的CSS并且不认为它有任何“无用”（如果有任何不必要的话，请纠正我），否则，我不确定为什么图像不显示。

以下是我目前所做工作的一个工作片段：

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 20s ease-in-out infinite;
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: -500%;
  }
}

<carousel>
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>

Answer 1

你需要在另一个之后手动推送一个图像，因为你有positin：绝对它们都在另一个上，因为左：0

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 20s ease-in-out infinite;
}
carousel img:nth-child(2) {
margin-left: 100%;
}
carousel img:nth-child(3) {
margin-left: 200%;
}
carousel img:nth-child(4) {
margin-left: 300%;
}
carousel img:nth-child(5) {
margin-left: 400%;
}
@keyframes slide {
  0% {
    left: 0;
  }
  100% {
    left: -500%;
  }
}

<carousel>
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>

Answer 2

问题是因为您将所有图像绝对定位在容器的top: 0px，left: 0px（意味着，它们都是一个在另一个上）并且还在它们处添加相同的动画。同时。因此，所有图片同时从left: 0%移动到left: -500%，因此您只能看到一张图片。

我不太确定你想达到什么效果，所以我会给你两个选择。如果您想要的是类似胶卷的效果，请移除position: absolute上的carousel img，让他们使用父级上的white-space: nowrap显示在同一行，然后设置父级动画margin-left。

＆＃13;

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  animation: slide 20s ease-in-out infinite;
}
carousel img {
  height: auto;
  max-height: 500px;
}
@keyframes slide {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -500%;
  }
}

＆＃13;

<carousel>
  <img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>

＆＃13;

或者，如果您希望实现一种效果，其中每个图像一个堆叠在另一个之下，但它们仅在前一个图像（上面的图像）完全移出后才开始移动，然后向每个图像添加animation-delay图像元素，使其等于上面的图像完成动画所需的时间。另外，将animation-duration更改为所有5张图片完成动画所需的总时间。

＆＃13;

carousel {
  max-width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  display: block;
}
carousel img {
  max-width: 100%;
  width: 1920px;
  height: auto;
  max-height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 100s ease-in-out infinite;
}
carousel img:nth-child(1){
  animation-delay: 80s;
}
carousel img:nth-child(2){
  animation-delay: 60s;
}
carousel img:nth-child(3){
  animation-delay: 40s;
}
carousel img:nth-child(4){
  animation-delay: 20s;
}
@keyframes slide {
  0% {
    left: 0;
  }
  20% {
    left: -100%;
  }
}

＆＃13;

<carousel>
  <img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
  <img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>

＆＃13;

CSS关键帧幻灯片图像未显示

2 个答案: