1.准备工作(好的开始[布局]能把后面事情都给简单化)

2.开始干活

$.ui.banner = $.Class.creat();$.ui.banner.prototype = {    init:function(){        this.opat = {            id:document,            nodeBe:null,            nodeAf:null,            url:[]            };        $.Object.extend(this.opat,arguments[0]||{});        this.fire();    },    fire:function(){        var _this = this,_opat = _this.opat;        var _id = $(_opat.id);        var _nodeBe = _this._nodeBe = _id.find(_opat.nodeBe);        var _nodeAf = _this._nodeAf = _id.find(_opat.nodeAf);        var _width = _this._width = _nodeBe.innerWidth();        var _height = _this._height = _nodeBe.innerHeight();        var _length = _opat.url.length;        var guid = 0;        _id.css({
    "background":"#666"});        _nodeBe.css({
    'background-image':'url("'+_opat.url[0]+'")'});        _nodeAf.css({
    'background-image':'url("'+_opat.url[1]+'")'});        setTimeout(function(){
    　　　　　　　/* 　　　　　　　 主体就是从这里开始的； 　　　　　　　 当一个动画切换开始的时候，我们就把整个布局都给重置掉； 　　　　　　　 为什么不选择结束的时候重置？ 　　　　　　　 原因： 　　　　　　　　　　1：我不能确定哪一个方块的动画最后完成； 　　　　　　　　　　2：正常的思路是最后重置，结果写不出，所以只能在开头做手脚； 　　　　　　　 动画用的方块重置以后就没难度了，只是动画方式的选择，无论多少种都没关系； 　　　　　　　 */            _nodeBe.css({                'background-image':'url("'+_opat.url[guid]+'")',                "opacity":1,                "top":0,                "left":0,                "width":_width+"px",                "height":_height+"px"            });            guid++;            if(guid >= _length) guid = 0;            _nodeAf.css({                'background-image':'url("'+_opat.url[guid]+'")',                "opacity":1,                "top":0,                "left":0,                "width":_width+"px",                "height":_height+"px"            });            _this['changeStyle'+Math.floor(Math.random()*5)]();            setTimeout(arguments.callee,3000);        },3000);    },    changeStyle0:function(){        var _this = this,_opat = _this.opat;        var _nodeBe = _this._nodeBe;        var _time = 0;        _nodeBe.each(function(i,o){            setTimeout(function(){                $(o[i]).animate({opacity:0})            },_time);            _time += 50;        })    },    changeStyle1:function(){        var _this = this,_opat = _this.opat;        var _nodeBe = _this._nodeBe;        var _nodeAf = _this._nodeAf;        var _width = _this._width;        var _height = _this._height;        function _animat(o1,o2,k){            _nodeBe.eq(k).animate(o1);            _nodeAf.eq(k).animate(o2);        }        _nodeBe.each(function(i,o){            var style = i%4;            switch(style){                case 0:                    _nodeAf.eq(i).css("left","-"+_width+"px");                    _animat({left:_width,ease:"spring"},{left:0,ease:"spring"},i);                    break;                case 1:                    _nodeAf.eq(i).css("top","-"+_height+"px");                    _animat({top:_height,ease:"spring"},{top:0,ease:"spring"},i);                    break;                case 2:                    _nodeAf.eq(i).css("left",_width+"px");                    _animat({left:-_width,ease:"spring"},{left:0,ease:"spring"},i);                    break;                case 3:                    _nodeAf.eq(i).css("top",_height+"px");                    _animat({top:-_height,ease:"spring"},{top:0,ease:"spring"},i);                    break;            }        });    },    changeStyle2:function(){        var _this = this,_opat = _this.opat;        var _nodeBe = _this._nodeBe;        var _nodeAf = _this._nodeAf;        _nodeBe.css({
    "opacity":0});        _nodeAf.css({
    "opacity":0});        var _time = _nodeBe.length * 50;        _nodeAf.each(function(i,o){            setTimeout(function(){                $(o[i]).animate({opacity:1})            },_time);            _time -= 50;        })    },    changeStyle3:function(){        var _this = this,_opat = _this.opat;        var _nodeBe = _this._nodeBe;        var _nodeAf = _this._nodeAf;        var _height = _this._height;        _nodeAf.css({                top:-_height+"px"            })        _nodeBe.each(function(i,o){            setTimeout(function(){                _nodeBe.eq(i).animate({                    top:_height                });                _nodeAf.eq(i).animate({                    top:0                });            },parseInt(Math.random()*200))        })    },    changeStyle4:function(){        var _this = this,_opat = _this.opat;        var _nodeBe = _this._nodeBe;        var _nodeAf = _this._nodeAf;        var _width = _this._width;        var _height = _this._height;        _nodeBe.animate({            width:0,            height:0,            top:_width/2,            left:_height/2,            "opacity":0        });    }} /*  图片加载函数，这个函数的意思是把所有需要加载的图片加载完成后在执行回调；  */new $.Imageload({    url:['http://pic002.cnblogs.com/images/2012/319713/2012103021492628.jpg',         'http://pic002.cnblogs.com/images/2012/319713/2012103021500686.jpg',         'http://pic002.cnblogs.com/images/2012/319713/2012103021504340.jpg',         'http://pic002.cnblogs.com/images/2012/319713/2012103021511080.jpg'],    callback:function(url){        new $.ui.banner({            id:"#banner",            nodeBe:".img1",            nodeAf:".img2",            url:url        });    }})