Question

我正在使用css3构建一个滑块。现在滑块连续运行但流程不正确。在幻灯片4之后，滑块从左向右一直向下移动到第一张幻灯片。

在最后一张幻灯片后我想要的是第一张幻灯片应该从右到左，因为它是以其他幻灯片的方式进行的。

只有css可以吗？

@keyframes slide{
  0%{ transform:translateX(0px) }
  25%{ transform:translateX(-200px) }
  50%{ transform:translateX(-400px) }
  75%{ transform:translateX(-600px) }
  100%{ transform:translateX(0px) }
}

fiddle

Answer 1

我设置了不同的解决方案以避免重复第一张图片

动画更复杂，但您可以重复设置延迟

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  border: 5px solid #fff;
  overflow: hidden;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  animation-delay: -1.25s;
}
#slideshow img:nth-child(3) {
  animation-delay: -2.5s;
}
#slideshow img:nth-child(4) {
  animation-delay: -3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  20% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-200px);
    opacity: 1;
  }
  30% {
    transform: translateX(-200px);
    opacity: 0;
  }
  90% {
    transform: translateX(200px);
    opacity: 0;
  }
  95% {
    transform: translateX(200px);
    opacity: 1;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
  }

＆＃13;

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
</div>

＆＃13;

Answer 2

<强>原因：

您看到此反向移动的原因是因为在动画持续时间的75％到100％之间，元素图像从-600px移动到0px。这一运动将与其他运动一样渐进，并且由于有相当长的一段时间（1.25秒），你可以看到它。

解决方案1：（即时切换4 - > 1，可能不是您之后的事情）

您可以通过确保从-600px到0px的移动瞬间完成来隐藏此反向移动。要执行此操作，请更改下面代码段中的关键帧。在这种情况下，从-600px到0px的移动在非常短的时间内发生（动画持续时间的0.001％），因此它不会对眼睛可见。

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 5s infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  33.333% {
    transform: translateX(-200px)
  }
  66.666% {
    transform: translateX(-400px)
  }
  99.999% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(0px)
  }
}

＆＃13;

<div id="slideshow">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
</div>

＆＃13;

解决方案2：（幻灯片在4 - > 1之间移动）

或者，如果你想要4 - ＆gt; 1也可以是滑动而不是瞬时（这可能是你的问题）然后你可能不得不使用多个img元素。第一个图像移出视野的时间（即从-600px到-800px），第二个图像开始进入，因此会产生连续效果。单身就不可能做到这一点。

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  position: absolute;
  left: 200px;
  top: 0;
  animation: slide 5s infinite 3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  25% {
    transform: translateX(-200px)
  }
  50% {
    transform: translateX(-400px)
  }
  75% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(-800px)
  }
}

＆＃13;

<div id="slideshow">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
  <img src="http://oi67.tinypic.com/24mia39.jpg">
</div>

＆＃13;

以下是具有多个图像的相同解决方案的变体，而不是具有4个图像的一个。

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  left: 200px;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(3) {
  left: 200px;
  animation: slide 5s infinite 1.25s;
}
#slideshow img:nth-child(4) {
  left: 200px;
  animation: slide 5s infinite 2.5s;
}
#slideshow img:nth-child(5) {
  left: 200px;
  animation: slide 5s infinite 3.75s;
}
@keyframes slide {
  0% {
    transform: translateX(0px)
  }
  25% {
    transform: translateX(-200px)
  }
  50%, 100% {
    transform: translateX(-400px)
}

＆＃13;

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
</div>

＆＃13;

解决方案3：（如果您有单独的图片，则无需重复图像）

如果您有多个图像而不是像图像一样的单个精灵，则可以实现循环滑动动画，而不会复制任何图像。以下是vals＆＃39;的变体。回答一个稍微简单的关键帧配置。（注意：最好预先加载图像以避免空白屏幕，直到它们被加载。）

＆＃13;

#slideshow {
  position: relative;
  width: 200px;
  height: 400px;
  border: 5px solid #fff;
  overflow: hidden;
}
#slideshow img {
  position: absolute;
  left: 0px;
  top: 0;
  animation: slide 5s infinite;
}
#slideshow img:nth-child(2) {
  animation-delay: 1.25s;
  opacity: 0;
}
#slideshow img:nth-child(3) {
  animation-delay: 2.5s;
  opacity: 0;
}
#slideshow img:nth-child(4) {
  animation-delay: 3.75s;
  opacity: 0;
}
@keyframes slide {
  0% {
    transform: translateX(200px);
    opacity: 1;
  }
  25% {
    transform: translateX(0px);
    opacity: 1;
  }
  50% {
    transform: translateX(-200px);
    opacity: 1;
  }
  50.1%,
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}

＆＃13;

<div id="slideshow">
  <img src="http://placehold.it/200x400/4F77AA/FFFFFF">
  <img src="http://placehold.it/200x400/72A94C/FFFFFF">
  <img src="http://placehold.it/200x400/A94F83/FFFFFF">
  <img src="http://placehold.it/200x400/F9E934/FFFFFF">
</div>

＆＃13;

Answer 3

我认为可能的唯一方法是，如果您复制img本身的第一个元素，并在最后一步的keyframes动画上复制，请不要转到 0 < / strong>，而是再次转到 1 的最后一个元素。请查看以下代码段：

＆＃13;
＆＃13;
#slideshow { position: relative; width: 200px; height: 400px; overflow: hidden; border: 5px solid #fff; background: yellow; } #slideshow img { position: absolute; left: 0; top: 0; animation: slide 5s infinite; } @keyframes slide { 0% { transform: translateX(0px) } 25% { transform: translateX(-200px) } 50% { transform: translateX(-400px) } 75% { transform: translateX(-600px) } 100% { transform: translateX(-800px) } }
＆＃13;
<div id="slideshow"> <img src="http://i.imgur.com/Ze4efyP.jpg"> </div>
＆＃13;
＆＃13;
＆＃13;

最终图像for循环将是这样的：

Answer 4

这是纯css3滑块的一个很好的例子，它可以像普通滑块一样工作，没有反向过渡。还有更好的代码和处理。希望这篇文章可以帮助你和其他人。

https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/#9

这将有助于学习和使用动画处理如何使您自己的滑块平滑。这个家伙还详细解释了构建纯CSS3滑块所需的内容。

P.S。想要对此进行否定的人是那些不想学习和理解他们正在使用的技术并且正在寻找快捷方式的人。

Sample Code作为我在阅读并理解上述文章后使用css进行的证明，如下所示：

使用css3动画关键帧继续滑块

4 个答案: