非常简短的jQuery图像幻灯片 [英] Very short jQuery Image Slideshow

问题描述

我正在寻找使用jQuery创建淡入淡出图像幻灯片的最短路径。
我在谷歌上发现的例子总是有很多不必要的特殊内容，我很难理解它们。 ：/

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"/>

：

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

最简单/最简单的方法是什么？

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

推荐答案

在这里，你把这在一起15分钟......

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

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

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

这篇关于非常简短的jQuery图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！