旋转木马插件（1）
;(function($){
var Carousel=function(poster){
var self=this;
this.poster=poster;
this.postMain=poster.find(".poster-list");
this.nextButton=poster.find(".poster-next-btn");
this.prevButton=poster.find(".poster-prev-btn");
this.postMainitem=this.postMain.find("li.poster-item");
// 解决旋转木马，偶数帧数的问题
if(this.postMainitem.length/2===0){
this.postMain.append(this.postMainitem.eq(0).clone());
this.postMainitem=this.postMainitem.children();
}
this.postMainFirstitem=this.postMainitem.eq(0);
this.lastitem=this.postMainitem.last();
this.time=null;
this.isanimate=true
this.settings={
"width":600,
"height":230,
"posterWidth":380,
"posterHeight":230,
"scale":0.9,
"speed":3000,
"verticalAlign":"middle",
"autopalays":true,
"delay": 3000
}
// 合并后的对像；
if(this.settings.autopalays){
this.autopalay();
}
$.extend(this.settings,this.getSetting());
this.SettingValue();
this.prevButton.click(function(){
if(self.isanimate){
self.clickNext("right");
self.isanimate=false;
}
})
this.nextButton.click(function(){
if(self.isanimate){
self.clickNext("left");
self.isanimate=false;
}
})
}
Carousel.prototype={
autopalay:function(){
var self=this;
this.time=setInterval(function(){self.clickNext("left")},2000);
this.hovers(function(){
self.postMain.hover(function(){
clearInterval(self.time)
},function(){
clearInterval(self.time);
self.time=setInterval(function(){self.clickNext("left")},2000);
})
})
},
hovers:function(fn){
fn();
}
,
getSetting:function(){
var setting=this.poster.attr("data-setting");
if(setting&&setting!=""){
return $.parseJSON(setting);
}else{
return {}
}
},
clickNext:function(dir){
if(dir==="left"){
var self=this;
var rzindexArr=[];
self.postMainitem.each(function(i,ele){
var previtem=$(this).prev().get(0)? $(this).prev():self.lastitem,
width=previtem.width(),
height=previtem.height(),
zIndex=previtem.css("z-index"),
opacity=previtem.css("opacity"),
left=previtem.css("left"),
top=previtem.css("top");
rzindexArr.push(zIndex);
$(this).animate({
width:width,
height:height,
top:top,
left:left,
opacity:opacity
},self.speed,function(){
self.isanimate=true
})
})
self.postMainitem.each(function(i){
$(this).css({
zIndex:rzindexArr[i]
})
})
}else if(dir==="right"){
var self=this;
var zIndexarr=[];
self.postMainitem.each(function(i,ele){
var previtem=$(this).next().get(0)? $(this).next():self.postMainFirstitem,
width=previtem.width(),
height=previtem.height(),
zIndex=previtem.css("z-index"),
opacity=previtem.css("opacity"),
left=previtem.css("left"),
top=previtem.css("top");
zIndexarr.push(zIndex);
$(this).animate({
width:width,
height:height,
top:top,
left:left,
opacity:opacity
},self.speed,function(){
self.isanimate=true
})
})
self.postMainitem.each(function(i){
$(this).css({
zIndex:zIndexarr[i]
})
})
}
},
//人工设置主页广告的宽度和大小；
SettingValue:function(){
var _this=this;
this.poster.css({
width:this.settings.width,
height:this.settings.height
})
this.postMain.css({
width:this.settings.width,
height:this.settings.height
})
var w=Math.ceil((this.settings.width-this.settings.posterWidth)/2);
this.nextButton.css({
width:w,
height:this.poster.height,
"z-index":Math.floor(this.postMainitem.length/2)
})
this.prevButton.css({
width:w,
height:this.poster.height,
"z-index":Math.floor(this.postMainitem.length/2)
})
this.postMainFirstitem.css({
left:w,
"z-index":Math.floor(this.postMainitem.length/2),
width:this.settings.posterWidth,
height:this.settings.posterHeight
})
var sliceItem=this.postMainitem.slice(1);
var rightSlice=sliceItem.slice(0,sliceItem.length/2);
var rw=this.settings.posterWidth;
var rh=this.settings.posterHeight;
var rs=(this.settings.width-this.settings.posterWidth)/2+this.settings.posterWidth;
var gap=Math.ceil((this.settings.width-this.settings.posterWidth)/2/rightSlice.length);
rightSlice.each(function(i,element){
rw=Math.ceil(rw*(0.9));
console.log(rw);
rh=Math.ceil(rh*0.9);
var rl=rs-rw+gap*(i+1);
var z_index=rightSlice.length-(i+1);
var top=Math.ceil((_this.settings.height-rh)/2);
if(_this.settings.verticalAlign==="top"){
top=0
}else if(_this.settings.verticalAlign==="middle"){
top=Math.ceil((_this.settings.height-rh)/2);
}else if(_this.settings.verticalAlign==="bottom"){
top=(_this.settings.height-rh);
}else{
top=Math.ceil((_this.settings.height-rh)/2);
}
$(this).css({
width:rw,
height:rh,
top:top,
left:rl,
zIndex:z_index,
opacity:1/(i+2)
})
})
var leftitem=sliceItem.slice(rightSlice.length);
var lw=this.settings.posterWidth;
var lh=this.settings.posterHeight;
var ls=Math.ceil((this.settings.width-this.settings.posterWidth)/2)+this.settings.posterWidth;
var lap=Math.ceil((this.settings.width-this.settings.posterWidth)/2/rightSlice.length);
var gapl=Math.ceil((this.settings.width-this.settings.posterWidth)/2/rightSlice.length);
leftitem.each(function(i){
lh=Math.ceil(lh*0.9);
lw=Math.ceil(lw*0.9);
var top=Math.ceil((_this.settings.height-rh)/2);
if(_this.settings.verticalAlign==="top"){
top=0
}else if(_this.settings.verticalAlign==="middle"){
top=Math.ceil((_this.settings.height-lh)/2);
}else if(_this.settings.verticalAlign==="bottom"){
top=(_this.settings.height-lh);
}else{
top=Math.ceil((_this.settings.height-lh)/2);
}
$(this).css({
width:lw,
height:lh,
top:top,
left:gapl*(2-i),
zIndex:leftitem.length-(i+1),
opacity:1/(i+2)
})
})
},
clickCirle:function(){
var _this=this;
this.nextButton.click(function(){
var lastitem=_this.postMainitem.last();
var previtem=!_this.postMainFirstitem.prev()? lastitem:_this.postMainFirstitem.next();
})
}
}
Carousel.int=function(objs){
var _this=this;
objs.each(function(){
new _this($(this));
})
}
window["Carousel"]=Carousel;
})(jQuery);
浙公网安备 33010602011771号