本文实例为大家分享了jQuery实现碎片轮播效果的具体代码,供大家参考,具体内容如下
一、效果图二、核心代码
碎片轮播 html
本文实例为大家分享了jQuery实现碎片轮播效果的具体代码,供大家参考,具体内容如下
一、效果图
二、核心代码
碎片轮播.html
<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>
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=$("<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; } } })();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好代码网。