jQuery实现碎片轮播效果

<script src="js/suiBanner.js"></script> 
<script>
    //实例化整个对象
    var suiBanner=$('.box').initBanner({
        imgs: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg'], //图片集合 必选
        size: {
            width: 1000,
            height: 560
        }, //容器的大小 可选
        //行数与列数 可选
        grid: {
            line: 15,
            list: 18
        },
        index: 0, //图片集合的索引位置 可选
        boxTime: 1500, //小方块来回运动的时长 可选
        fnTime: 1000 //banner切换的时长 可选
    }) 
</script> 

function(){
    var instance;
    $.fn.extend({
        initBanner:function(setting){
            if(!instance){
                instance=new SuiBanner();
                instance.option.container=$(this);
                instance.option= $.extend({},instance.option,setting);
                instance._init();
                return instance;
            }
        }
    });
    //碎片轮播的类
    function SuiBanner(){

    }
    //设置默认配置
    SuiBanner.prototype={
        constructor:SuiBanner,
        option:{
            container:null,//默认的容器
            imgs:[],//图片集合必选
            size:{
                width:800,
                height:600
            },//容器的大小，可选
            grid:{
                line:8,
                list:12
            },
            index:0,//图片集合的索引位置，可选
            boxTime:1000,//小方块来回运动的时长，可选
            fnTime:3000,//banner切换的时长，可选
            sui:[],//碎片的集合
            suiPos:[],//存储碎块的最终位置
            timer:null,//接收计时器
        },
        _init:function(){
            var that=this,opt=this.option;
            //初始化方法
            //设置容器的样式
            if(opt.container){
                opt.container.css({
                    width:opt.size.width,
                    height:opt.size.height
                });
            }
            //创建dom
            that.createDom();
            //开始动画
            that.start();

        },
        createDom:function(){
            var that=this,opt=this.option;
            //创建dom元素
            opt.itemImage=$("<div class='itemImage'></div>");
            opt.imgs.forEach(function(img,index,arr){
                var img=$("<img src='"+img+"'/>");
                var aparent=$("<a href='#' style='z-index:"+(arr.length-index)+";'></a>");
                aparent.append(img);
                opt.itemImage.append(aparent);
            });
            opt.container.append(opt.itemImage);
            //创建一个碎片的容器
            opt.suiItem=$("<div class='suiItem'></div>");
            opt.container.append(opt.suiItem);
            //创建所有的碎片
            var html="";
            for(var i=0;i<opt.grid.line;i++){
                for(var k=0;k<opt.grid.list;k++){
                    opt.suiPos.push([opt.size.width/opt.grid.list*k,opt.size.height/opt.grid.line*i]);
                    html+="<div style='background-size: "+opt.size.width+"px
"+opt.size.height+"px;width:"+opt.size.width/opt.grid.list+"px;height:"+opt.size.height/opt.grid.line+"px;'></div>";
                }
            }
            opt.sui[0]=html;
        },
        start:function(){
            var that=this,opt=this.option;
            //开始加载动画
            opt.suiItem.html("");
            opt.itemImage.children().eq(opt.index).show().siblings().hide();
            opt.timer=setTimeout(function(){
                opt.index++;
                if(opt.index>=opt.imgs.length-1){
                    opt.index=0;
                }
                that.animation();
            },opt.fnTime);
        },
        animation:function(){
            var that=this,opt=this.option;
            //设置小块的随机位置
            opt.suiItem.html(opt.sui[0]).children().each(function(index){
                //随机自身的left、top
                var left=that.random(opt.size.width*2,opt.size.width/2);
                var top=that.random(opt.size.height*2,opt.size.height/2);
                $(this).css({
                    left:left,
                    top:top,
                    backgroundImage:'url('+opt.imgs[opt.index]+')',
                    backgroundPosition:-opt.suiPos[index][0]+'px '+(-opt.suiPos[index][1])+'px'
                }).animate({
                    left:opt.suiPos[index][0],
                    top:opt.suiPos[index][1]
                },opt.boxTime);
            }).last().queue(function(){
                that.start();
                $(this).dequeue();
            });
        },
        random:function(s,e){
            return Math.random()*s-e;
        }
    } 
})();