How can I set fadein and fadeout sildeshow of images in JQuery continusly without any event?

Question

How can I set simple JQuery slideshow with CSS continuously, without any event like mouse hover, click etc.?

Answer 1

write a function that does a slidehsow. use settimeout give it an interval and call your function.

see an example here: http://stackoverflow.com/questions/3636859/cycle-css-backgrounds/3636917#3636917

Answer 2

Most functions like that in jQuery are called, or at least initialized, in the $(document).ready() call. Simply include a timing command like setInterval that returns your function and it will run when the DOM is loaded, like:

$(document).ready(function(){
    var t = setInterval(mySlideShow, 3000)
    });

Or, if the function repeats itself, simply invoke the function on ready():

$(document).ready(function(){
    mySlideShow();
    });

Edit:

As requested, the simplest slideshow I can think of is something like this:

<div id="slideshow">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

CSS:images should be set to display:none

Then jQuery:

$(document).ready(function(){
    $('#slideshow img:first-child').addClass('shown').show();
    setInterval(slideShow,3000);
});
//and here is the function
function slideShow()
    {
    $('#slideshow img:last-child').prependTo($('#slideshow')).fadeIn(1000);
    $('.shown').fadeOut(1000).removeClass('shown');
    }

Might not be perfect for you but you can see where I'm going with it at least...