我如何用html和css编程幻灯片？

Question

我想对幻灯片进行编程，或者您调用一串从一侧流向另一侧的图片：D。到目前为止，我的代码可以正常工作，但是我不知道如何对它进行编程，以至于如果“字符串”结束，则将字符串放在末尾，以便它连续不断地流动。你有给我的提示吗？直到现在，我一直在使用关键帧，并且它从一帧跳到另一帧。我该怎么办才能顺利运行？ （对不起，我的英语不好，我是德语：D）

这是我为动画编写的代码。我没有在这里放一些代码，因为它只是为不同的设备格式化。

`滑块图形img {向左飘浮;宽度：25％;}

@keyframes slider {
    0% {
        left: 0;
    }
    10% {
        left: -50%;
    }
    20% {
        left: -100%;
    }
    30% {
        left -150%;
    }
    40% {
        left: -200%;
    }
    50% {
        left: -250%;
    }
    60% {
        left: -300%;
    }
    70% {
        left: -350%;
    }
    80% {
        left: -400%;
    }
    90% {
        left: -450%;
    }
    100% {
        left: -500%;
        left: 0;
    }`

感谢您的帮助人员：D

Answer 1

我看到您正在使用CSS和关键帧对每一个动作进行编程。我建议一个更好的替代方法是https://cssanimate.com/，您可以在其中进行更精确的动画处理。

[您说您的代码工作正常，所以我认为您正在使用style.display =“ none”的谎言。如果是这样，则应该使用延迟，并在播放动画之后立即使用setTimeout（）设置显示。功能。像这样的东西：

setTimeout(function(){ alert("Hello"); }, 3000);

让我知道是否可行！

Answer 2

希望对您有帮助。

.slideshow {
  overflow: hidden;
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide {
  background: #FFC300;
}


.slide-number {
  color: #000;
  text-align: left;
  font-size: 4em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}

<div class="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><h1 class="slide-number">First</h1></div>
    <div class="slide"><h1 class="slide-number">Second</h1></div>
    <div class="slide"><h1 class="slide-number">Third</h1></div>
    <div class="slide"><h1 class="slide-number">Fourth</h1></div>
    <div class="slide"><h1 class="slide-number">Fifth</h1></div>
  </div>
</div>