jQuery 带有图像的动画循环

Question

我想使用不透明动画创建一个非常简单的幻灯片。我无法使用 fadeIn 或 fadeOut 函数，因为设置 display:none 会使我的布局崩溃。

我有这4张固定图像，我想做的是将不透明度设置为0，然后更改img src，然后再次将不透明度设置为1。

有什么想法吗？我怎样才能让它永远循环？

谢谢。

Answer 1

您可以使用 jQuerys animate 方法。首先，您在要淡出的图像上使用它，并将不透明度设置为 0，在更改图像源后，您必须使用它来将不透明度更改为 1。

对于无限循环：您可以使用 setInterval 每 X 毫秒调用一个函数。因此，您必须将所有更改图像的代码放在一个函数中（我们暂时称它为 changeImage），然后使用 setInterval。例如，您可以使用 setInterval(changeImage, 3000) 启动它，图像将每 3 秒更改一次。

Answer 2

尝试将 img 元素放置在父元素容器内；利用.fadeTo()，不调整display 属性 of css，最后索引父元素容器内的元素；动画完成后，将img的opacity调整为1；调用 .prependTo() 将 img 移动到父元素容器中的第一个索引；无限重复。

(function fx() {
  return $("div img").eq(-1).delay(1500).fadeTo(3000, 0, function() {
    $(this).css("opacity", "1").prependTo($(this).parent())
  }).promise().then(fx);
}).call($("div img"));

div {
  position: relative;
  height: 400px;
  width: 400px;
  margin: 0 auto;
}
div img {
  position: fixed;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  <img src="http://lorempixel.com/400/400/cats" />
  <img src="http://lorempixel.com/400/400/technics" />
  <img src="http://lorempixel.com/400/400/nature" />
  <img src="http://lorempixel.com/400/400/animals" />
</div>

jQuery 带有图像的动画循环

jQuery animation loop with images

javascript

jquery

css

jquery-animate