/** * osslider 阳光轮播插件 v1.0 * objs 传送对象 */ function osslider(objs) { var that = this; //that获得this的作用域 后面都是that 防止干扰 that.objs = objs; //将传送来的对象赋予this that.pnode = $(that.objs.pnode); //pnode轮播容器对象 that.cnodes = that.pnode.find(that.objs.cnode); //cnodes轮播子节点对象集合 that.cnodenums = that.cnodes.length; //预存轮播体的总数 that.nownodekey = 0; //初始第一次默认显示节点为第一个 that.width = that.cnodes.find('img').width();//得到容器的宽度 that.height = that.cnodes.find('img').height();//得到容器的高度 that.moveflag = true;//添加是否可以进行下一个轮播状态 that.ispause = false;//是否暂停状态 that.speednum = 0;//自动轮播的计数 if (!that.objs.speed) {//添加默认时间 that.objs.speed = 3000; } if (!that.objs.autoplay) {//添加默认自动播放 that.objs.autoplay = true; } that.init = function() {//轮播的初始化 that.pnode.addclass('osslider-main'); that.pnode.css({//轮播容器的大小控制 启用bfc模式 'width':that.width, 'height':that.height, 'overflow':'hidden', 'position':'relative' }); //创建上下条切换按钮 var $togglebtn = $(''); $togglebtn.appendto(that.pnode); //为切换按钮绑定事件 $(that.pnode).find('.slider-btn-prev').bind('click',function(){ that.togglemove('prev'); }); $(that.pnode).find('.slider-btn-next').bind('click',function(){ that.togglemove('next'); }); //为高亮导航创建节点 var $navparent = $(''); $navparent.appendto(that.pnode); that.cnodes.each(function(index, el) {//采用遍历,添加前后顺序 if (index==0) {//让第一个显示在前面 同时为每个轮播体创建对应nav点 var indexnum = 20; $navparent.append('
  • '+(index+1)+'
  • '); } else { var indexnum = index; $navparent.append('
  • '+(index+1)+'
  • '); } $(this).css({//为每一个轮播体添加样式和顺序 'width':that.width + 'px', 'height':that.height + 'px', 'overflow':'hidden', 'position':'absolute', 'top':'0px', 'left':'0px', 'z-index':indexnum }); }); //为高亮导航节点绑定事件 $(that.pnode).find('.slider-nav li').each(function(index, el) { $(this).bind('click',function(){ that.togglemove(false,index); }); }); //判断是否自动播放 if (that.objs.autoplay) { that.movetime(); } } /** * 切换轮播后 轮播导航的高亮 * @param {number} tid */ that.slidernavtoggle = function(tid,nid) { $('.slider-nav li').each(function(index, el) { if (index==tid||index==nid) { $(this).toggleclass('active'); } }); } /** * 切换效果指令函数 避免bug * @param {string} command 'prev'|'next' * @param {number} tid 下一个要切换的tid * command与tid可以缺省一个,函数自动判断 */ that.togglemove = function(command,tid) { if (that.moveflag) { if (!command) { if (that.nownodekey==tid) { return; } else if ((that.nownodekey==0&&tid==that.cnodenums-1)||tid'); $(that.cnodes[that.nownodekey]).append($cvnode); $cvnode.html($backhtml); $cvnode.css({//为每个栅格节点添加css样式 'position':'absolute', 'width':that.width/12+'px', 'height':that.height+'px', 'zindex':20, 'overflow':'hidden', 'left':that.width/12*i+'px', 'top':'0' }); $cvnode.find('*').first().css({ 'display':'block', 'margin-left':that.width/-12*i+'px' }); } //分配对应效果 switch (shownum) { default: case 0: //添加动画过渡效果 张牙舞爪 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ if (index%2==0) { var topnums = that.height; } else { var topnums = that.height*-1; } $(this).animate({ top:topnums + 'px' },1500); }); settimeout(function(){//动画结束后开始恢复原有状态 that.moveflag = true; that.cnodes[tid].style.zindex = 20; that.cnodes[that.nownodekey].style.zindex = that.nownodekey; $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容 that.nownodekey = tid;//得到新的当前节点key },1500); break; case 1: //兼容到下面 case 2: if (shownum==1) { //添加动画过渡效果 下降 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ var sp = 80*index; $(this).animate({ top: $(this).height() + 'px' },500+sp); }); } else { //添加动画过渡效果 上升 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ var sp = 80*index; $(this).animate({ top: $(this).height()*-1 + 'px' },500+sp); }); } settimeout(function(){//动画结束后开始恢复原有状态 that.moveflag = true; that.cnodes[tid].style.zindex = 20; that.cnodes[that.nownodekey].style.zindex = that.nownodekey; $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容 that.nownodekey = tid;//得到新的当前节点key },1380); break; } } /** * 栅格左右张牙舞爪切换 */ that.gridleft = function(tid,shownum) { that.cnodes[tid].style.zindex = 19;//让下个节点准备好 var $backhtml = that.cnodes[that.nownodekey].innerhtml;//备份当前节点的内容 that.cnodes[that.nownodekey].innerhtml = '';//清空节点,方便使用 for (var i = 0;i<12;i++) {//利用循环 创建出栅格节点 var $cvnode = $('
    '); $(that.cnodes[that.nownodekey]).append($cvnode); $cvnode.html($backhtml); $cvnode.css({//为每个栅格节点添加css样式 'position':'absolute', 'width':that.width+'px', 'height':that.height/12+'px', 'zindex':20, 'overflow':'hidden', 'left':'0', 'top':that.height/12*i+'px', }); $cvnode.find('*').first().css({ 'display':'block', 'margin-top':that.height/-12*i+'px' }); } switch (shownum) { default: case 0: //添加动画过渡效果 张牙舞爪 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ if (index%2==0) { var leftnums = that.width; } else { var leftnums = that.width*-1; } $(this).animate({ 'left':leftnums + 'px' },1500); }); break; case 1: case 2: if (shownum==1) { //添加动画过渡效果 向左 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ var sp = 80*index; $(this).animate({ 'left':that.width*-1 + 'px' },620+sp); }); } else { //添加动画过渡效果 向右 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ var sp = 80*index; $(this).animate({ 'left':that.width + 'px' },620+sp); }); } break; } settimeout(function(){//动画结束后开始恢复原有状态 that.moveflag = true; that.cnodes[tid].style.zindex = 20; that.cnodes[that.nownodekey].style.zindex = that.nownodekey; $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容 that.nownodekey = tid;//得到新的当前节点key },1500); } //格子切换效果 that.celltoggle = function(tid) { that.cnodes[tid].style.zindex = 19;//让下个节点准备好 var $backhtml = that.cnodes[that.nownodekey].innerhtml;//备份当前节点的内容 that.cnodes[that.nownodekey].innerhtml = '';//清空节点,方便使用 for (var i = 0;i<20;i++) {//利用循环 创建出栅格节点 if (i<5) {//行数判断 var rows = 0; } else if (i<10) { var rows = 1; } else if (i<15) { var rows = 2; } else { var rows = 3; } var $cvnode = $('
    '); $(that.cnodes[that.nownodekey]).append($cvnode); $cvnode.html($backhtml); $cvnode.css({//为每个栅格节点添加css样式 'position':'absolute', 'width':that.width/5+'px', 'height':that.height/4+'px', 'zindex':20, 'overflow':'hidden', 'left':that.width/5*(i%5)+'px', 'top':that.height/4*rows+'px', }); $cvnode.find('*').first().css({ 'display':'block', 'margin-left':that.width/-5*(i%5)+'px', 'margin-top':that.height/-4*rows+'px', }); } //添加动画过渡效果 $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ if (index%2==0) { $(this).find('*').first().animate({ "margin-left": $(this).width() + 'px' }, 500); } }); settimeout(function(){ $(that.cnodes[that.nownodekey]).find('.cvnode').each(function(index,el){ if (index%1==0) { $(this).find('*').first().animate({ "margin-left": $(this).width() + 'px' }, 500); } }); },600); settimeout(function(){//动画结束后开始恢复原有状态 that.moveflag = true; that.cnodes[tid].style.zindex = 20; that.cnodes[that.nownodekey].style.zindex = that.nownodekey; $(that.cnodes[that.nownodekey]).html($backhtml);//清除动画产生的多余内容 that.nownodekey = tid;//得到新的当前节点key },1100); } //自动播放控制方法 that.movetime = function() { settimeout(function(){ if (that.moveflag) { that.speednum++; if (that.speednum>=that.objs.speed/100) { that.speednum = 0; that.togglemove('next'); } } if (!that.ispause) { settimeout(arguments.callee,100); } },100); } that.init(); }