【jquery】幻灯片效果

闲着无聊，用Jquery写了一个幻灯片效果。

我这人喜欢造轮子，除了jquery这种有强大开发团队的框架级别JS，其实的一些小程序都是尽量自己写。

一是因为怕出问题了没人问，二是自己写的改起来也方便。

效果可参考：

http://www.helloweba.com/demo/supersized/

只是上面这个DEMO用的是supersized，功能比较强大，就是代码加密过了，读起来很困难。

废话不说，代码放上。

CSS：

 

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

 

JS：

2014-12-11 追加：

我把这段代码加到项目里，然后项目马上要结束的时候发现，这货在IE8下面居然无法正常执行。

原因是fadeIn，fadeOut和window.innerWidth 以及 window.innerHeight在IE下无法正常执行。

好吧，一直都是钟爱Chrome，不用IE调试也是我的原罪。

于是我就在代码里加了一个判断，如果是IE的话，就不用fadeIn，fadeOut,

　　

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;
        div.style.display = "block";
        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');
　　　　　　  
　　　　　　　// ie 兼容
            if (!jQuery.browser.msie) {
                diplaying.fadeOut(2000);
            } 
           
            diplaying.removeClass("visible");
            var prepare = $("#" + img.id);
            prepare.addClass("visible");

　　　　　　 // ie兼容
            if (jQuery.browser.msie) {
                prepare.css({
                    "width": document.body.clientWidth,
                    "height": document.body.clientHeight
                });
            } else {
                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"]
});