Javascript CSS/HTML-无限滚动滑块问题

我正在创建一个滑块，目标是让三个不同的广告在无限循环中从左向右滑动

我创建了滑块，如下所示：

  <div class="container">
    <div id="slider">
      <div class="box">
        <div class="one"></div>
      </div>
      <div class="box">
        <div class="two"></div>
      </div>
      <div class="box">
        <div class="three"></div>
      </div>
    </div>
  </div>

问题是：

---

我无法将第一张幻灯片设置为“重置”，因此在动画结束时会出现小的闪烁，它会重置。我试过不同的方法，但没有用。最佳情况下，我可以添加一个“不可见”的关键帧来重置位置。你知道这是怎么回事吗

您需要在css中添加动画方向和动画播放状态。 更新类似于#滑块的css：

#slider {
  width: 300%; 
  position: relative; 
  overflow: hidden;
  animation-name: slide;
  animation-duration: 6s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:running;
}

结果

或者，如果需要将最后一张幻灯片返回到第一张幻灯片，请更改以下内容：

#slider {
    width: 300%; 
    position: relative; 
    overflow: hidden;
    animation-name: slide;
    animation-duration: 6s;
    animation-iteration-count:infinite;
    /* animation-direction:alternate; */
    /* animation-play-state:running; */

}

@keyframes slide {
  0% {margin-left: 0}
  16.67% {margin-left: 0}
  33.33% {margin-left: -100%}
  50% {margin-left: -100%}
  66% {margin-left: -100%}
  75% {margin-left: -200%}
  80% {margin-left: -200%}
  85% {margin-left: -200%}
  100% {margin-left: 0%}
}

---

结果-

您需要在css中添加动画方向和动画播放状态。 更新类似于#滑块的css：

#slider {
  width: 300%; 
  position: relative; 
  overflow: hidden;
  animation-name: slide;
  animation-duration: 6s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:running;
}

结果

或者，如果需要将最后一张幻灯片返回到第一张幻灯片，请更改以下内容：

#slider {
    width: 300%; 
    position: relative; 
    overflow: hidden;
    animation-name: slide;
    animation-duration: 6s;
    animation-iteration-count:infinite;
    /* animation-direction:alternate; */
    /* animation-play-state:running; */

}

@keyframes slide {
  0% {margin-left: 0}
  16.67% {margin-left: 0}
  33.33% {margin-left: -100%}
  50% {margin-left: -100%}
  66% {margin-left: -100%}
  75% {margin-left: -200%}
  80% {margin-left: -200%}
  85% {margin-left: -200%}
  100% {margin-left: 0%}
}

---

结果-

谢谢，非常好的输入！使用

动画方向：alternate

的第一个解决方案几乎就是我想要的。不过，理想情况下，动画会像第二个示例那样重置，但在整个过程中不可见（即，不可见快速滑动），因此看起来像一个无限循环。也许这是不可能的？很高兴我提出了有用的选择！是否有任何可视示例，您需要什么结果？这里是一个类似示例的代码笔，您可以看到滑块总是向右->向左滑动：

https://codepen.io/dudleystorey/pen/ehKpi

这里的代码区别在于，这是使用

图

元素，这是不可能的，因为我不会使用图像，但是

div

里面有内容的元素。谢谢，非常好的输入！使用

动画方向：alternate

的第一个解决方案几乎就是我想要的。不过，理想情况下，动画会像第二个示例那样重置，但在整个过程中不可见（即，不可见快速滑动），因此看起来像一个无限循环。也许这是不可能的？很高兴我提出了有用的选择！是否有任何可视示例，您需要什么结果？这里是一个类似示例的代码笔，您可以看到滑块总是向右->向左滑动：

https://codepen.io/dudleystorey/pen/ehKpi

这里的代码区别在于，这是使用

图

元素，这是不可能的，因为我不会使用图像，但是

div

包含内容的元素。