Question

我创建了一个幻灯片，其中有很多来自其他非常有才华的人（我正在学习）。但是，我的代码似乎一直到第五张图像，但很快就转移到第一张图片，而不是保持与前四张幻灯片相同的时间表。我试图避免使用JS或jQuery。我觉得它更容易阅读，特别是对我来说，考虑到我的Java背景很少。

以下是我目前使用的代码：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}
body,
figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
  animation: 60s slidy infinite;
}
figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: 95%;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}

＆＃13;

<div id="captioned-gallery">
  <figure class="slider">
    <figure>
      <img src="http://lorempixel.com/800/600/nature/1">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/2">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/3">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/4">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/5">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/6">
    </figure>
  </figure>
</div>

＆＃13;

所以我认为关键帧部分必须有问题。但是，我觉得我可能只是很可怕，并且很难找到一个对我有意义的好参考。我已经弄乱了百分比，但似乎无法做到正确。我主要需要知道关键帧是如何工作的以及如何在每张幻灯片中划分工作。我甚至想知道如何添加另一张幻灯片，但解决这个问题将是一个很好的开始。我很感谢你花时间去剖析这个。非常感谢所有帮助。

Answer 1

在我找到最后一张图片仅显示一瞬间的原因之前，还需要进行一些其他更改，以使幻灯片显示正常工作：

有问题的CSS似乎已编码，假设只有5张图片，但HTML标记有6个.slider figure元素。我不确定这是故意还是错误，但我会根据提供的HTML解释这些更改。
首先，figure.slider的宽度应从600%更改为500%，因为有六张图片，每张图片的宽度必须为100%（即覆盖整个身体）。这应始终计算为（元素数* 100％）。如果没有这样做，一些图像将换行到下一行，并且由于父级的overflow: hidden设置而被隐藏。
接下来，figure.slider figure的宽度应该从20%更改为16.67%，因为我们现在有六张图片，因此每张图片应该有1/6 ^th宽度为100％。
当我们有5张图片时，left: 0%会显示第一张图片，在left: -100%处会显示2张^nd图片，因此只会显示left: -400% 1}}将显示第5张图像。根据相关代码提供的问题，left: -300%到left: -400%移动仅在95%到100%之间发生，因此第5张图片仅在100%处完全显示这与动画结束的时间相同，这就是为什么最后一张图片仅在瞬间显示。
为了解决上述问题，应更改keyframe规则。因为对于我们的情况，我们拍摄了6张图像，我们需要5（n-1）个幻灯片移动，每个幻灯片移动都是在动画持续时间的5%范围内完成的。这意味着幻灯片的移动会耗尽25%的持续时间。现在剩下的75%应该在图像元素中平均分割，这样它们每个都会在消失前显示x秒。因此，我们会在每个图片的12.5%停留时间到达5%幻灯片移动时间。一旦我们对@keyframes进行了修改，我们就可以看到每个图像都有他们的屏幕时间（60％的12.5％= 7.5秒）。

@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
  0% {
    left: 0%;
  }
  12.5% {
    left: 0%;
  }
  17.5% {
    left: -100%;
  }
  30% {
    left: -100%;
  }
  35% {
    left: -200%;
  }
  47.5% {
    left: -200%;
  }
  52.5% {
    left: -300%;
  }
  65% {
    left: -300%;
  }
  70% {
    left: -400%;
  }
  82.5% {
    left: -400%;
  }  
  87.5% {
    left: -500%;
  }
  100% {
    left: -500%;
  }  
}
body,
figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}
div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
figure.slider {
  position: relative;
  width: 600%;
  font-size: 0;
  animation: 60s slidy infinite;
}
figure.slider figure {
  width: 16.66%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: 95%;
}
figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}

<div id="captioned-gallery">
  <figure class="slider">
    <figure>
      <img src="http://lorempixel.com/800/600/nature/1">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/2">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/3">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/4">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/5">
    </figure>
    <figure>
      <img src="http://lorempixel.com/800/600/nature/6">
    </figure>
  </figure>
</div>

CSS幻灯片显示问题，最后一张图片没有显示但只是瞬间显示

1 个答案: