观察各个电商网址轮播图的效果，总结了一下主要突破点与难点
1.->封装函数的步骤与具体实现
2->this关键字的指向
3->jquery js函数熟练运用 如animate
4->各个图片的位置关系分析
5->正确的json格式
实现步骤
封装jq函数四个步骤：
1 ----->构造函数 var Carousel = function(poster){} //poster 为传入的类 具体为一个ul
2 ----->Carousel.prototype上写函数
3 ----->Carousel.init new出每一个对象
4 ----->window["Carousel"] = Carousel; 添加到window上
先是主要的html结构
<!-- 正确的json对象 属性有双引号 -->
<div class="J_Poster poster-main" data-setting='{
"width":1000,
"height":270,
"posterHeight":270,
"posterWidth":640,
"scale":0.9,
"speed":300,
"verticalAlign":"middle", "autoPlay":true,
"delay":2000
}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item"><a href="#"><img src="img01/1.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/2.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/3.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/4.jpg" width="100%"></a></li>
<li class="poster-item"><a href="#"><img src="img01/5.jpg" width="100%"></a></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
下面是具体实现
Carousel.prototype = {
//获取人工配制参数方法
getSetting:function(){},
//根据配制参数去控制高度，宽度。。
setSettingValue:function(){},
//垂直方向位置设置
setVerticalAlign:function(height){},
//设置剩余帧位置关系
setPosterPos:function(){},
//旋转函数
carouselRotate:function(arr){},
//自动播放函数
autoPlayFn:function(){}
};
1.构造函数 Carousel
var Carousel = function(poster){
var self = this;
//保存单个旋转木马对象
this.poster = poster;
this.posterItemMain = poster.find("ul.poster-list");// 保存poster中ul对象
//保存上下切换按钮
this.prevBtn = poster.find("div.poster-prev-btn");
this.nextBtn = poster.find("div.poster-next-btn");
this.posterItems = this.posterItemMain.find("li");//所有li的个数
this.posterFirstItem = this.posterItems.first();//保存第一帧
this.posterLastItem = this.posterItems.last();
this.rotateFlag = true; //旋转结束的标志 若不设置 多次点击时会出现bug
//默认配置参数
this.setting = {
"width":900, //幻灯片宽度
"height":270, //幻灯片高度
"posterHeight":270, //幻灯片第一帧宽度
"posterWidth":640, //幻灯片第一帧高度
"scale":0.9, //幻灯片比例
"speed":500, //切换速度
"autoPlay":true, //是否自动播放
"delay":2000, //自动播放的延迟时间
"verticalAlign":"middle"//图片垂直方向上显示的位置
};
$.extend(this.setting,this.getSetting());
this.setSettingValue();
this.setPosterPos();
// 按钮事件
this.prevBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouselRotate("left");
}
});
this.nextBtn.click(function(){
if(self.rotateFlag){
self.rotateFlag = false;
self.carouselRotate("right");
}
});
if(self.setting.autoPlay){
this.poster.hover(function(){//hover 为jq函数
window.clearInterval(self.timer);
},function(){
self.prevBtn.click();
});
self.autoPlayFn();
}
};
主要获取对象： carousel对象本身，幻灯片区域，幻灯片的上下切换按钮，幻灯片的每一张图片，幻灯片的第一帧与最后一帧
默认的配置参数： 如果有html中有多块切换区域时，要修改不同的切换样式，在html下修改date-setting属性即可，具体获取到人工配制参数的函数将在prototype下实现
事件的执行： 1.上下按钮切换点击事件（执行旋转函数）， 2.是否自动播放
Carousel.prototype上函数的实现
1.获取来自htnl中data-setting的人工配制参数
getSetting //主要注意json格式下的属性要用双引号才能读取
getSetting:function(){
var setting = this.poster.attr("data-setting");
if(setting&&setting!=""){
return $.parseJSON(setting);// 传出json对象
}
else{
return {};
}
/*return setting;*/
}
2.根据配置参数去控制幻灯片区域，第一帧的位置关系，上下切换按钮的样式，主要设置宽高 z-index left值
setSettingValue
setSettingValue:function(){
this.poster.css({
width:this.setting.width,
height:this.setting.height
});
this.posterItemMain.css({
width:this.setting.width,
height:this.setting.height
});
var w = (this.setting.width-this.setting.posterWidth)/2 //按钮的宽度
this.prevBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil((this.posterItems.size()/2))//按钮的层级关系
});
this.nextBtn.css({
width:w,
height:this.setting.height,
zIndex:Math.ceil((this.posterItems.size()/2))
});
this.posterFirstItem.css({
left:w,
zIndex:Math.floor((this.posterItems.size()/2))
});
},
3.剩余帧的位置关系，样式，主要通过获取第一帧的位置关系来确定其他帧的关系//通过slice函数将区域分为左右区域，然后左右区域每一帧分别修改z-index left top opacity width height
setPosterPos{
rightSlice.each(function(){})
leftSlice.each(function(){})
}
setPosterPos:function(){
var sliceItems = this.posterItems.slice(1);
var sliceSize = sliceItems.size()/2
var rightSlice = sliceItems.slice(0,sliceSize);
//
var leftSlice = sliceItems.slice(sliceSize);
var level = Math.floor((sliceItems.size()/2));
//每张幻灯片的间距
var gap = ((this.setting.width-this.setting.posterWidth)/2)/level;
var self = this;
//右边帧的宽度高度
var rw = this.setting.posterWidth;
var rh = this.setting.posterHeight;
var firstLeft = (this.setting.width-this.setting.posterWidth)/2;
var fixoffsetLeft = firstLeft+rw;
//设置右边帧的宽度高度透明度
rightSlice.each(function(i){
//右边每一帧相应的宽度透明度的值
level--;
rw = self.setting.scale*rw;
rh = self.setting.scale*rh;
var j = i;
//右边帧的位置
$(this).css({
width:rw,
zIndex:level,
height:rh,
top:self.setVerticalAlign(rh),
left:fixoffsetLeft+(++i)*gap-rw,
opacity:1/++j
});
});
var lw = rightSlice.last().width(),
lh = rightSlice.last().height();
var oloop = Math.floor((sliceItems.size()/2));
leftSlice.each(function(i){
//左边帧每一帧的宽度高度
$(this).css({
width:lw,
zIndex:i,
height:lh,
top:self.setVerticalAlign(lh),
left:i*gap,
opacity:1/oloop
});
lw = lw/self.setting.scale;
lh = lh/self.setting.scale;
oloop--;
});
},
4.垂直方向位置设置，即幻灯片区域的将垂直居上 垂直居中 垂直居底显示
setVerticalAlign(height)// height 为data-setting中传来的verticalAlign
//垂直方向位置设置
setVerticalAlign:function(height){
var verticalType = this.setting.verticalAlign;
var top = 0;
if(verticalType === "middle"){
top = (this.setting.height-height)/2;
}else if(verticalType === "top"){
top = 0;
}else if(verticalType === "bottom"){
top = this.setting.height-height;
}else{
top = (this.setting.height-height)/2;
};
return top;
},
5.旋转函数的编写 注意是否获取到DOM结点用get(0)方法
//旋转函数
carouselRotate:function(arr){ var _this_ = this;
var zIndexArr = [];
if(arr==="left"){
this.posterItems.each(function(){
var self = $(this),
prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
width = prev.width(),
height = prev.height(),
zIndex = prev.css("zIndex"),
opacity = prev.css("opacity"),
top = prev.css("top"),
left = prev.css("left");
zIndexArr.push(zIndex);
self.animate({
width:width,
height:height,
//zIndex:zIndex,
opacity:opacity,
top:top,
left:left
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});
}else if(arr==="right"){
this.posterItems.each(function(){
var self = $(this),
next = self.next().get(0)?self.next():_this_.posterFirstItem,
width = next.width(),
height = next.height(),
zIndex = next.css("zIndex"),
opacity = next.css("opacity"),
top = next.css("top"),
left = next.css("left");
zIndexArr.push(zIndex); self.animate({
width:width,
height:height,
zIndex:zIndex,
opacity:opacity,
top:top,
left:left
},_this_.setting.speed,function(){
_this_.rotateFlag = true;
});
});
this.posterItems.each(function(i){
$(this).css("zIndex",zIndexArr[i]);
});//先切换页面 再过渡其他元素 }
},
6.自动播放函数编写
//自动播放函数
autoPlayFn:function(){
var self = this;
this.timer = window.setInterval(function(){
self.prevBtn.click();
},self.setting.delay);
},
3.new幻灯片中每一帧的实例// this指向carousel对象本身 即要实现 new Carousel(posters);
Carousel.init = function(posters){
var _this_ = this;
posters.each(function(){
new _this_($(this));
});
}
4.添加到window中
window["Carousel"] = Carousel;