Javascript 简单衰落图像交换

我很难找到一个简单的jquery映像交换。我发现的大多数例子都比我需要的更复杂，并且做了我不想做的事情

目标：我有5张图片，我想淡入，滑入，等等。我想从一张图片淡入/溶解到下一张图片，但幻灯片也可以。当页面第一次加载时，我希望第一个图像显示4秒…然后淡入下一个图像，4秒，然后下一个，等等。无限循环

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

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

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

代码如下：

HTML

JavaScript

$('.fadein img:gt(0)').hide();

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

---

选择一个插件。任何插件。哪一个都不重要。有很多可供选择。现在使用它，然后继续解决实际感兴趣的问题。谢谢，但是当我尝试您的代码时，旋转图像会被移出框外：如果您能快速查看并告诉我如何将旋转图像恢复到棕色边框内，我将非常感激。提前谢谢。我喜欢淡入淡出的效果，非常完美；向左：85像素；这将解决定位问题。

.fadein {
    position:relative;
    height:320px;
    width:320px;
}

.fadein img {
    position:absolute;
    left:0;
    top:0;
}

$('.fadein img:gt(0)').hide();

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