我的幻灯片中的动画将在幻灯片结束时再次播放

Question

我创建了一个自动播放的图像幻灯片，每张幻灯片之间都有一个简单的淡入淡出。问题是每张幻灯片似乎都在转换到下一张之前“重新加载”。因此，如果我向幻灯片添加动画，例如从左侧滑入，图像 1 将滑入，然后随着图像 2 的淡入，图像 1 将消失并再次从左侧滑入。 Here it is on JSfiddle，当第二张出现时，您可以看到第一张图像再次隐约滑入。任何帮助表示赞赏。

<div id="slideshow">

  <div class=slidein-left>
    <img src="https://www.port.ac.uk/-/media/images/news-events-and-blogs/news/2020/october/cat-eyes-closed-600x400.jpg">
  </div>

  <div>
    <img src="https://cdn.shopify.com/s/files/1/0997/4496/files/Untitled_design_19_grande.jpg">
  </div>

</div>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow {
  position: relative;
  width: 100%;
  height: 80%;
  margin: 0;
  padding: 0;
}

#slideshow>div {
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

.slidein-left {
  position: relative;
  left: -100%;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-animation: slideleft 1s forwards 0.5s;
  animation: slideleft 1s forwards 0.5s;
}

@-webkit-keyframes slideleft {
  100% {
    left: 0;
  }
}

@keyframes slideleft {
  100% {
    left: 0;
  }
}

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

Answer 1

在 setInterval 中：

1. 首先要隐藏第一张图片
2. 然后显示第二张图片
3. 然后将第一张图片附加到滑块

问题出在第 3 步。 当您附加第一张图片时，它的显示将被阻止，并且根据您的 css，当第一张图片显示时，它肯定有“slideleft”动画，并且在下一个周期开始之前，您的第一张图片会再次显示。

您可以通过在第二张图片之后隐藏第一张图片来解决此问题：

#slideshow > div:not(.slidein-left) + .slidein-left {
  display: none !important;
}

在css中的关键帧上方添加上面的代码，你就可以开始了。

而不是

#slideshow > div:not(.slidein-left)

您可以为您的第二个 div（在 #slideshow 内）分配一个类，并改用 .that_class。

---

============================

更新

更好的解决方案是延迟第 3 步。

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)

  setTimeout(function() {$('#slideshow > 
  div:first').appendTo("#slideshow")}, 1000)

}, 3000);

并删除我之前提到的css代码。

最好去掉 css 动画延迟，因为它会破坏图像 1 的淡入淡出效果。

  animation: slideleft 1s forwards;

=====================

更新 2

我在上一次更新中提供的 javascript 代码的 setTimeout 部分在我上传时发生了变化。

setTimeout 函数的 $("") 部分必须在一行中，并且其中包含换行符（由 Stackoverflow 生成）会破坏整个代码。