图像之间褪色

如何使用jQuery淡化两个图像之间的旋转？ 比如说。

我喜欢这些图像在每个之间淡入/淡出2秒。

谢谢！ 非常感激。 🙂

Answer 1

我敲了一个简单的例子。

Answer 2

将你的html重写为

为清晰起见，我添加了第三张图片。 添加一个像jquery函数

 function nextSlide() { jQuery('.slide.current').each(function() { var next = jQuery(this).next('.slide'); if (!next.size()) next = jQuery(this).siblings('.slide').eq(0); jQuery(this).fadeOut().removeClass('current'); next.fadeIn().addClass('current'); }); slidetimer=setTimeout('nextSlide()',slidespeed); } 

并在您的基础JavaScript中，添加

 var slidespeed = 2000; var slidetimer = null; jQuery(document).ready(function() { nextSlide() }); 

我没有像这样测试这个，所以可能会有错字。 周围的div确保所有幻灯片图像都位于div所在的位置，因为它们的位置是绝对的。 虚拟图像不可见，但确实填满了使周围的div实际环绕所有图像所需的空间。 你可能不需要这个。

您的图像应该具有相似的大小，或者至少假人应该与最大的图像一样大。

$ 2c，* -pike

Answer 3

我正在寻找一种在网络摄像头图像之间淡入淡出的方法，而不需要在显示的图像之间显示这一点 我正在做的是将新图像设置为背景图像，淡出封闭图像，将背景图像设置为封闭图像，然后再次显示封闭图像。

你可以做点什么

我想出了这个。

Answer 4

你可以在没有jquery的情况下完成它。 只有用css：和图像之间的冷淡淡化

 .fade img { transition: all .8s; max-width: 200px; } .fade:hover img:nth-child(2) { opacity: 0; } .fade img:first-child { position: absolute; z-index: -1; } 

Answer 5

通过使用.animate和.css来更好地控制时序

这将创建一个软交叉渐变的卷轴。

在每个循环中，它将前面的不可见图像移动到开始动画不透明度为100.一旦完成，之前的可见图像将被设置为不透明度0并移动到前面等。