本文实例为大家分享了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;
}
}
})(); 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。