javascript - simple fading image swap -

javascript - simple fading image swap -

i'm having problem finding simple jquery image swap. examples i've found more complex need, , things don't want.

objective: have 5 images want fade in, slide in, or etc. love fade/dissolve 1 image next, slide fine too. when page 1st loads, want 1st image show 4 seconds...then fade next image, 4 seconds, next, etc. infinite loop.

currently code simple image swap, not elegant:

document.getelementbyid("imgmain").src = "images/yurt/sleigh.png";

what's best , simplest way accomplish this?

working illustration on jsfiddle.

here's code:

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

javascript jquery html image slideshow