;(function($){
var poster = function(pro,setting){
var _this = this;
this.poster = pro;
this.settingdom();
this.isie7 = /msie 6.0|msie 7.0/gi.test(window.navigator.useragent);
this.setting = setting ; /*or pro.attr();*/
this.defaultsetting = {
"isoddshow" : true , //偶数时是否复制一张,默认是需要复制防止错位
"width" : 800, //poster total width
"height" : 204, //poster total height
"posterfirstwidth" : 307, //first picture width
"posterfirstheight" : 204, //first picture height
"autoplay" : false,
"delay" : 5000,
"scale" : 0.9,
"speed" : 500,
"verticalalign" : "middle"
};
$.extend( this.defaultsetting , this.getcustomsetting());
this.posteritems = this.poster.find('ul.poster-list');
this.firstitem = this.poster.find('ul.poster-list > li:first-child');
this.posteritemslength = this.poster.find('ul.poster-list>li').length;
this.posterfirstitem = this.poster.find('ul.poster-list>li:first-child');
this.posterlastitem = this.poster.find('ul.poster-list>li:last-child');
if(this.defaultsetting.isoddshow) this.isevenpicnum();
this.prevbtn = this.poster.find('.poster-left-btn');
this.nextbtn = this.poster.find('.poster-right-btn');
this.prevbtn = this.poster.find('div.poster-left-btn');
this.nextbtn = this.poster.find('div.poster-right-btn');
this.rotateflag = true;
this.countsettingvalue();
this.setpositionvalue();
this.autoplay();
this.prevbtn.on('click', function(event) {
if(_this.rotateflag){
_this.rotateflag = false;
_this.posterrotate('right') ;
}
});
this.nextbtn.on('click', function(event) {
if(_this.rotateflag){
_this.rotateflag = false;
_this.posterrotate('left') ;
}
});
};
poster.prototype = {
settingdom : function (){
var srcarr = this.poster.find('img').map(function(i,e){return e.src;});
var hrefarr = this.poster.find('a').map(function(i,e){return e.href;});
var uldom = this.poster.html('
').find('.poster-list');
jquery.each(srcarr , function(i,e){
uldom.prepend('');
});
uldom.parents('.poster-main').append("","");
},
//是否带有自定义设置
getcustomsetting : function(){
var setting = this.setting ;
if(setting && setting != ''){
return setting;
}else{
return {};
}
},
//设置默认值主要是为了当用户修改默认属性后css也相对调整
countsettingvalue : function(){
this.poster.css({
"width": this.defaultsetting.width,
"height": this.defaultsetting.height
});
this.firstitem.css({
"width": this.defaultsetting.posterfirstwidth,
"height": this.defaultsetting.posterfirstheight
});
this.prevbtn.css({
"width": (this.defaultsetting.width - this.defaultsetting.posterfirstwidth)/2,
"height": this.defaultsetting.height
});
this.nextbtn.css({
"width": (this.defaultsetting.width - this.defaultsetting.posterfirstwidth)/2,
"height": this.defaultsetting.height
});
this.posterfirstitem.css({
"left": (this.defaultsetting.width - this.defaultsetting.posterfirstwidth)/2,
"zindex": math.floor(this.posteritemslength/2)
})
},
//设置默认加载进来时所有图片对应的位置
setpositionvalue : function(){
var self = this ,
level = math.floor(this.posteritemslength/2);
items = this.poster.find('.poster-list > li').slice(1),
leftitems = items.slice( 0 , items.length/2 ),
rightitems = items.slice( items.length/2 ),
optionimgleft = (this.defaultsetting.width - this.defaultsetting.posterfirstwidth) / 2 ,
gap = optionimgleft / level,
dw = this.defaultsetting.posterfirstwidth,
dh = this.defaultsetting.posterfirstheight;
leftitems.each(function(i,e){
dw *= self.defaultsetting.scale;
dh *= self.defaultsetting.scale;
var j = i ;
$(e).css({
"width" : dw,
"height" : dh,
"zindex" : --level,
"opacity" : 1/(++j),
"left" : optionimgleft + self.defaultsetting.posterfirstwidth + ((++i) * gap ) - dw ,
"top" : self.settingverticalalign(dh)
})
});
var rw = leftitems.last().width(),
rh = leftitems.last().height(),
oloop = math.floor(this.posteritemslength/2);
rightitems.each(function(i,e){
$(e).css({
"width" : rw,
"height" : rh,
"zindex" : level++,
"opacity" : 1 / oloop--,
"left" : gap*i ,
"top" : self.settingverticalalign(rh)
})
rw = rw / self.defaultsetting.scale;
rh = rh / self.defaultsetting.scale;
});
},
//设置垂直居中位置
settingverticalalign : function(height){
var verticalalign = this.defaultsetting.verticalalign,
top;
if( verticalalign === 'middle' ){
top = (this.defaultsetting.height - height) / 2;
}else if( verticalalign === 'top' ){
top = 0;
}else if( verticalalign === 'bottom' ){
top = (this.defaultsetting.height - height);
}else{
top = (this.defaultsetting.height - height) / 2;
}
return top;
},
//向左向右事件
posterrotate : function(dir){
var self = this ,
indexarr = [];
if(dir==='left'){
this.posteritems.find('li').each(function(index, el) {
var prev = $(el).prev().get(0) ? $(el).prev() : self.posterlastitem,
width = prev.width(),
height = prev.height(),
zindex = prev.css('zindex'),
top = prev.css('top'),
left = prev.css('left'),
opacity = prev.css('opacity');
indexarr.push(zindex);
$(el).animate({
width: width,
height: height,
//zindex: zindex,
top: top,
left: left,
opacity: opacity
},self.defaultsetting.speed,function(){
self.rotateflag = true ;
});
});
//让z-index转化效果优先于别的提高交互
this.posteritems.find('li').each(function(i){
$(this).css("zindex",indexarr[i]);
});
}else if(dir==='right'){
this.posteritems.find('li').each(function(index, el) {
var next = $(el).next().get(0) ? $(el).next() : self.posterfirstitem,
width = next.width(),
height = next.height(),
zindex = next.css('zindex'),
top = next.css('top'),
left = next.css('left'),
opacity = next.css('opacity');
indexarr.push(zindex);
$(el).animate({
width: width,
height: height,
//zindex: zindex,
top: top,
left: left,
opacity: opacity
},function(){
self.rotateflag = true ;
});
});
this.posteritems.find('li').each(function(i){
$(this).css("zindex",indexarr[i]);
});
}
},
//是否自动播放
autoplay : function(){
var self = this;
if(this.defaultsetting.autoplay){
var timer = setinterval(function(){
self.posterrotate('left');
} , self.defaultsetting.delay );
this.poster.hover(function(){
cleartimeout(timer);
},function(){
self.autoplay();
});
}
},
//防止上传的图片数量为基数(通过后插入方式保持偶数图片数量)
isevenpicnum:function(){
if(this.posteritemslength%2 === 0){
this.posteritems.append(this.posterfirstitem.clone());
this.posteritemslength = this.poster.find('ul.poster-list>li').length;
this.posterfirstitem = this.poster.find('ul.poster-list>li:first-child');
this.posterlastitem = this.poster.find('ul.poster-list>li:last-child');
}
}
};
/*poster.init = function(pros,setting){
var _this_ = this ;
pros.each(function(i,e){ new _this_($(e),setting); });
$(window).load(function(){ $('.poster-main').addclass('done'); })
};*/
$.fn.extend({
poster:function(option){
new poster(this,option);
$(window).load(function(){ $('.poster-main').addclass('done'); });
}
});
window['poster'] = poster;
})(jquery);