简单的褪色图像交换

我找不到简单的jquery图像交换。 我发现的大部分例子都比我需要的更复杂，做了我不想要的事情。

目标：我有5张想要淡入，幻灯片放映等的图像。我希望从一张图片淡入/淡化到另一张图片，但幻灯片也可以。 当第一页加载时，我希望第一张图像显示4秒……然后淡入下一张图像，4秒，然后是下一张等等。无限循环。

目前我的代码是一个简单的图像交换，不是很优雅：

document.getElementById("imgMain").src = "images/yurt/sleigh.png"; 

实现这一目标的最佳和最简单的方法是什么？

Answer 1

关于jsFiddle的工作示例。

这是代码：

HTML

CSS

 .fadein { position:relative; height:320px; width:320px; } .fadein img { position:absolute; left:0; top:0; } 

JavaScript的

 $('.fadein img:gt(0)').hide(); setInterval(function () { $('.fadein :first-child').fadeOut() .next('img') .fadeIn() .end() .appendTo('.fadein'); }, 4000); // 4 seconds