How to show image randomly with fade-in fade-out using jquery?

Question

This is HTML Code.

<div id="Slogan">
<h1>
<img src="img1.gif" />
<img src="img2.gif" />
<img src="img3.gif" />
<img src="img4.gif" />
<img src="img5.gif" />
</h1>
</div>

#slogan {float:left;position:relative;width:100%;}

I want show all image randomly but one by one like slide show, with fade-in fade-out effect. How to do with jquery?

I need lightest possible way.

Answer 1

So there's a really cool plugin that may (or may not, depending on how light you want it) do exactly what you want, it's called Nivo Slider, it has a load of different transitions but on my website I choose to use the fade in fade out, it's very customisable

http://nivo.dev7studios.com/

Answer 2

check this

Answer 3

Have you tried using the jQuery Cycle plugin?

Answer 4

// Define a random integer function
function random( n ){
    return Math.floor( Math.random() * n );
}

// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#Slogan img');
var n = images.length;
var current = random( n );
images.hide();
images.eq( current ).show();

// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval( function(){
    images.eq( current ).fadeOut( transition_time, function(){
        current = random( n );
        images.eq( current ).fadeIn( transition_time );
    } );
}, 2 * transition_time + waiting_time);

// You can then stop the effect with:
// clearInterval( interval_id );