观察各个电商网址轮播图的效果，总结了一下主要突破点与难点
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结构
下面是具体实现
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;