Very short jQuery Image Slideshow

问题:

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 trouble understanding them. :/

The Slideshow would need to be casted an an existing image:

<img src="myImage.jpg"/>

using the follogin images:

imgArray = ["img1.jpg","img2.jpg","img3.jpg"]

What would be the shortest/easiest way of doing this?

回答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/ddd','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();    
});

回答2:

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

回答3:

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/

回答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.