jQuery实现碎片轮播效果 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}); }//创建domthat.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.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、topvar 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; }} })();