jQuery 带有图像的动画循环

jQuery animation loop with images

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

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

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

谢谢。

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

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

尝试将 img 元素放置在父元素容器内; 利用.fadeTo(),不调整display 属性 of css,最后索引父元素容器内的元素;动画完成后,将imgopacity调整为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>