【jquery】幻灯片效果

img.slider-image {
    position:absolute;
    display:none;
    top:0px;
    left:0px;
    z-index:-10;
}
img.slider-image.visible {
    visibility:visible;
    z-index:-1;
}

var pic = function (url, parentId,callback) {
    this.url = url;
    this.id = url.split(‘/‘).reverse()[0].split(‘.‘)[0];
    this.parentId = parentId;
    this.img = null;
    this.isLoaded = false;
    this.load();
    this.callback = callback;
}
pic.prototype = {
    load: function () {
        this.img = new Image();
        this.img.src = this.url;
        this.img.id = this.id;
        this.img.className = "slider-image";

        var pic = this;
        this.img.onload = function () {
            pic.img.onload = null;
            pic.img.height = window.innerHeight;
            pic.img.width = window.innerWidth;
　　　　　　　// 加载完毕，将图片添加到DOM中
            $("#" + pic.parentId).append(pic.img);
            pic.isLoaded = true;
            if (typeof (pic.callback) == "function") {
                pic.callback();
            }
        }
    }
}

var slider = function (opt) {
    this.opt = {
        start: false,// 判断幻灯片开始循环
        index: 0,
        imgsUrl: null,
        interval: 5000,// 幻灯片间隔时间
        id :"slider"// 幻灯片DIV ID
    }
    this.imgs = null;
    $.extend(this.opt,opt);
    this.init();
}
slider.prototype = {
    init: function () {
        var slider = this;
　　　　 // 页面添加幻灯片父级DIV
        var div = document.createElement(‘div‘);
        div.id = slider.opt.id;
        document.body.appendChild(div);

　　　　　// 加载图片
        var imagesUrls = this.opt.imgsUrl;
        this.imgs = new Array();
        for (var i = 0; i < imagesUrls.length; i++) {
            this.imgs.push(
                new pic(imagesUrls[i],
                slider.opt.id,
                function () {
　　　　　　　　　　　　// 图片加载完毕，立即开始循环幻灯片
                    if (!slider.opt.start) {
                        slider.opt.start = true;
                        slider.start();
                    }
                }
            ));
        }
    },
    slide: function (slider) {
        var imagesSrc = slider.imgs;
        var img = imagesSrc[slider.opt.index];

　　　　 // 循环播放幻灯片
        slider.opt.index++;
        if (slider.opt.index >= imagesSrc.length) {
            slider.opt.index = 0;
        }
        if (img.isLoaded) {
            // 将正在显示的图片淡出，将下一张图片淡入
            var diplaying = $(‘#‘ + slider.opt.id).find(‘.visible‘);
            diplaying.fadeOut(2000);
            diplaying.removeClass("visible");
            var prepare = $("#" + img.id);
            prepare.addClass("visible");
            prepare.css({
                "width": window.innerWidth,
                "height":window.innerHeight
            });
            prepare.fadeIn(1000);
        } else {
            // 如果这张图片没有加载，则立刻显示下张图片
            slider.slide(slider);
        }
    },
    start: function () {
        var slider = this;
        slider.slide(slider)
        // 间隔一段时间循环播放幻灯片
        setInterval(function () {
            slider.slide(slider);
        }, this.opt.interval);
    }
}

new slider({
    imgsUrl: ["/Images/Login/slider1.jpg", "/Images/Login/slider2.jpg", "/Images/Login/slider3.jpg"]
});