jQuery实现碎片轮播效果

本文实例为大家分享了jQuery实现碎片轮播效果的具体代码，供大家参考，具体内容如下

一、效果图

二、核心代码

碎片轮播.html

suiBanner.js

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=$("
");
            opt.imgs.forEach(function(img,index,arr){
                var img=$("");
                var aparent=$("");
                aparent.append(img);
                opt.itemImage.append(aparent);
            });
            opt.container.append(opt.itemImage);
            //创建一个碎片的容器
            opt.suiItem=$("
");
            opt.container.append(opt.suiItem);
            //创建所有的碎片
            var html="";
            for(var i=0;i

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。