jQuery动画循环与图像

我想创建一个非常简单的幻灯片使用不透明度动画。我无法使用fadeIn或fadeOut功能，因为设置display：none会使我的布局崩溃。jQuery动画循环与图像

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

任何想法？我怎么能让它永远循环？

谢谢。

2015-05-09 Leandro Faria

可以包括'html'，'css'，'js'试过吗？ – guest271314

尝试将img元素放置在父元素容器中; 利用.fadeTo()，它不调整display属性css，在父元素容器内的最后一个索引元素;当动画完成时，调整opacity的img至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>

来源

2015-05-09 22:42:58 guest271314

我真的很感激你的帮助，但我不能有图像位置：绝对也不使用淡入淡出功能（使用显示属性）。这就是为什么我想要使用可视性。 –

@LeandroFaria查看更新后的帖子。替换位置：固定位置：绝对位置; '.fadeTo'不调整'display'属性。要确认这一点，可以打开'console'，在动画过程中检查图像; '.fadeTo'只使用'opacity'属性。 – guest271314

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

对于无限循环：您可以调用函数每X毫秒与setInterval。所以你必须把你的所有代码改变一个函数中的图像（我们现在称之为changeImage），然后利用setInterval。例如，您可以使用setInterval(changeImage, 3000)启动它，并且图像每3秒更改一次。

来源

2015-05-09 20:50:15

jQuery动画循环与图像

回答

相关问题