Very short jQuery Image Slideshow

Question

I\'m looking for the shortest way of creating a fading image slideshow using jQuery. Examples I found on google always had a lot a unneccessary special stuff in it and I had tr

Answer 1

Here you go, put this together in 15 minutes...

FIDDLE: http://jsfiddle.net/eEg3R/4/

HTML:

CODE:

    var images = ['http://placehold.it/300x300/000','http://placehold.it/300x300/ffffd','http://placehold.it/300x300/123456'];

function slideshow(options) {
    var defaults ={
        fadeInSpeed:1000,
        fadeOutSpeed:1000,
        slideLength:4000
    }

    //merge options with defaults
    var settings= $.extend({},defaults,options);
    //get a reference to our image holder
    var $slide = $('#slide');
    //initialize the slide index
    var slideIndex=0;

    //begin the slideshow
    nextSlide();

    function nextSlide(){
        //load the new image...
        $slide[0].src = images[slideIndex];
        //show it
        $slide.fadeIn(settings.fadeInSpeed,function(){
            setTimeout(function(){
                $slide.fadeOut(settings.fadeOutSpeed,nextSlide);
                //increment index and reset to 0 when we have reached the end
               slideIndex = ++slideIndex % images.length;
            },settings.slideLength); 
        });
    }
}

$(function(){
    //optionally pass in custom settings, or just run normal to use defaults...
    slideshow();    
});