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:

<img id="slide" src=""/>

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();    
});

Answer 2

You could loop over your array and use Jquery's fadeIn in tandem with fadeOut with a specified duration. That will fade in and fade out your images with specified intervals.

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

Answer 3

Hope below code may help you,

var imgArray = ["img1.jpg","img2.jpg","img3.jpg"];
var i=0;
setInterval(function(){
    $('div').fadeToggle(2000,function(){
        $(this).text(imgArray[i]);    
    });
    i++;
    if(imgArray.length==i-1){
        i=0;
    }     
},2000);

Demo

Answer 4

You can follow this link to create your image slide with very less of code The whole idea behind is sliding the image position and use transformation effect while changing position of images.

http://jforjs.com/creating-image-slider-html-css-without-plugin/

good thing is you can create a object oriented code(jquery pluing) as well to create multiple image slide with just few lines of code.