<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
})
</script>
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,
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
});
}
that.createDom();
that.start();
},
createDom:function(){
var that=this,opt=this.option;
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){
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;
}
}
})();