如何使用 html 和 css 编写幻灯片？答案

【问题标题】：How can I program a slideshow with html and css?如何使用 html 和 css 编写幻灯片？
【发布时间】：2020-04-15 20:52:03
【问题描述】：

我想编写一个幻灯片，或者你调用一串从一侧流到另一侧的图片：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

【问题讨论】：

您好 Obti，尝试检查一下，是否与您想要实现的目标相似；) jsfiddle.net/razh/UNkLk
是的，但应该是这样的：例如有 20 张图片，其中 4 张始终显示，然后显示的图片向左淡入，而其他图片从右侧淡入屏幕。我希望这样可以更容易理解我的意思：D
如果我理解你这应该是你的目标，请检查：jsfiddle.net/q4d9m/2希望这会有所帮助
不完全是：我的目标是始终可以看到更多颜色，并且动画会将一种颜色推向左侧，而右侧的一种颜色应显示在其他颜色的后面。如果可能的话，它是自动动画的，所以没有箭头按钮向前移动

标签： html css css-animations slideshow

【解决方案1】：

我看到您正在使用 css 和关键帧对每个动作进行编程。我建议这样做的更好选择是https://cssanimate.com/，您可以在其中更精确地制作动画。

您说您的代码运行良好，所以我假设您使用的东西与 style.display = "none" 的谎言一起使用。如果是这样，那么您应该使用延迟并在动画播放后立即使用 setTimeout() 设置显示；功能。像这样的：

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

让我知道这是否有效！

【讨论】：

【解决方案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>

【讨论】：