JS_prettyBanner[说给自己听]

DEMO

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

<!--
　　我把一整块的Banner分成了6快，当然也可以分成更多。
-->
<div class="imgbox part1">
    <div class="img1"></div>
    <div class="img2"></div>
</div>

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

DEMO