简单衰落图像交换(simple fading image swap)

我无法找到一个简单的jQuery图像交换。 大多数我发现的例子更复杂的比我需要的，做的事情，我不想。

目的：我有5张图片我想淡入，在滑动，或者等我很想褪色/从一个图像溶解到下一个，但幻灯片将被罚款了。 当页面加载一号，我希望一号图像显示4秒钟......然后淡出到下一个图像，4秒，那么接下来，等无限循环。

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

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

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

Answer 1:

工作的jsfiddle例子。

下面的代码：

HTML

<div class="fadein">
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>

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

文章来源: simple fading image swap