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

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

你可能感兴趣的