首页 > 其他 > 详细

多功能前台交互效果插件superSlide

时间:2016-10-06 12:28:56      阅读:3212      评论:0      收藏:0      [点我收藏+]

标签:des   class   style   log   com   http   it   si   la   

平时我们常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等效果要加载n个插件,又害怕代码冲突又怕不兼容

现在我们只需求要一个多功能前台交互效果插件superSlide就可以搞定了

现在介绍这个插件SuperSlide.2.1.1

下载地址:http://www.superslide2.com/

 

技术分享

 

 

js.min文件

技术分享
/*!
 * SuperSlide v2.1.1 
 * 轻松解决网站大部分特效展示问题
 * 详尽信息请看官网:http://www.SuperSlide2.com/
 *
 * Copyright 2011-2013, 大话主席
 *
 * 请尊重原创,保留头部版权
 * 在保留版权的前提下可应用于个人或商业用途

 * v2.1.1:修复当调用多个SuperSlide,并设置returnDefault:true 时返回defaultIndex索引错误

 */

!function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoPlay:!1,delayTime:500,interTime:2500,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"swing",startFun:null,endFun:null,switchLoad:null,playStateCell:".playState",mouseOverStop:!0,defaultPlay:!0,returnDefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevCell,d),g=a(c.nextCell,d),h=a(c.pageStateCell,d),i=a(c.playStateCell,d),j=a(c.titCell,d),k=j.size(),l=a(c.mainCell,d),m=l.children().size(),n=c.switchLoad,o=a(c.targetCell,d),p=parseInt(c.defaultIndex),q=parseInt(c.delayTime),r=parseInt(c.interTime);parseInt(c.triggerTime);var Q,t=parseInt(c.scroll),u=parseInt(c.vis),v="false"==c.autoPlay||0==c.autoPlay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autoPage||0==c.autoPage?!1:!0,y="false"==c.pnLoop||0==c.pnLoop?!1:!0,z="false"==c.mouseOverStop||0==c.mouseOverStop?!1:!0,A="false"==c.defaultPlay||0==c.defaultPlay?!1:!0,B="false"==c.returnDefault||0==c.returnDefault?!1:!0,C=0,D=0,E=0,F=0,G=c.easing,H=null,I=null,J=null,K=c.titOnClassName,L=j.index(d.find("."+K)),M=p=-1==L?p:L,N=p,O=p,P=m>=u?0!=m%t?m%t:t:0,R="leftMarquee"==e||"topMarquee"==e?!0:!1,S=function(){a.isFunction(c.startFun)&&c.startFun(p,k,d,a(c.titCell,d),l,o,f,g)},T=function(){a.isFunction(c.endFun)&&c.endFun(p,k,d,a(c.titCell,d),l,o,f,g)},U=function(){j.removeClass(K),A&&j.eq(N).addClass(K)};if("menu"==c.type)return A&&j.removeClass(K).eq(p).addClass(K),j.hover(function(){Q=a(this).find(c.targetCell);var b=j.index(a(this));I=setTimeout(function(){switch(p=b,j.removeClass(K).eq(p).addClass(K),S(),e){case"fade":Q.stop(!0,!0).animate({opacity:"show"},q,G,T);break;case"slideDown":Q.stop(!0,!0).animate({height:"show"},q,G,T)}},c.triggerTime)},function(){switch(clearTimeout(I),e){case"fade":Q.animate({opacity:"hide"},q,G);break;case"slideDown":Q.animate({height:"hide"},q,G)}}),B&&d.hover(function(){clearTimeout(J)},function(){J=setTimeout(U,q)}),void 0;if(0==k&&(k=m),R&&(k=2),x){if(m>=u)if("leftLoop"==e||"topLoop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var V=m-u;k=1+parseInt(0!=V%t?V/t+1:V/t),0>=k&&(k=1)}else k=1;j.html("");var W="";if(1==c.autoPage||"true"==c.autoPage)for(var X=0;k>X;X++)W+="<li>"+(X+1)+"</li>";else for(var X=0;k>X;X++)W+=c.autoPage.replace("$",X+1);j.html(W);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>E&&(E=a(this).width(),D=a(this).outerWidth(!0)),a(this).height()>F&&(F=a(this).height(),C=a(this).outerHeight(!0))});var Y=l.children(),Z=function(){for(var a=0;u>a;a++)Y.eq(a).clone().addClass("clone").appendTo(l);for(var a=0;P>a;a++)Y.eq(m-a-1).clone().addClass("clone").prependTo(l)};switch(e){case"fold":l.css({position:"relative",width:D,height:C}).children().css({position:"absolute",width:E,left:0,top:0,display:"none"});break;case"top":l.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; height:‘+u*C+‘px"></div>‘).css({top:-(p*t)*C,position:"relative",padding:"0",margin:"0"}).children().css({height:F});break;case"left":l.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; width:‘+u*D+‘px"></div>‘).css({width:m*D,left:-(p*t)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0"}).children().css({"float":"left",width:E});break;case"leftLoop":case"leftMarquee":Z(),l.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; width:‘+u*D+‘px"></div>‘).css({width:(m+u+P)*D,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(P+p*t)*D}).children().css({"float":"left",width:E});break;case"topLoop":case"topMarquee":Z(),l.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; height:‘+u*C+‘px"></div>‘).css({height:(m+u+P)*C,position:"relative",padding:"0",margin:"0",top:-(P+p*t)*C}).children().css({height:F})}}var $=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},_=function(b){var c=function(c){for(var d=c;u+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var b=a(this);if(b.attr("src",b.attr(n)).removeAttr(n),l.find(".clone")[0])for(var c=l.children(),d=0;d<c.size();d++)c.eq(d).find("img["+n+"]").each(function(){a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeAttr(n)})})};switch(e){case"fade":case"fold":case"top":case"left":case"slideDown":c(p*t);break;case"leftLoop":case"topLoop":c(P+$(O));break;case"leftMarquee":case"topMarquee":var d="leftMarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftMarquee"==e?D:C,g=P;if(0!=d%f){var h=Math.abs(0^d/f);g=1==p?P+h:P+h-1}c(g)}},ab=function(a){if(!A||M!=p||a||R){if(R?p>=1?p=1:0>=p&&(p=0):(O=p,p>=k?p=0:0>p&&(p=k-1)),S(),null!=n&&_(l.children()),o[0]&&(Q=o.eq(p),null!=n&&_(o),"slideDown"==e?(o.not(Q).stop(!0,!0).slideUp(q),Q.slideDown(q,G,function(){l[0]||T()})):(o.not(Q).stop(!0,!0).hide(),Q.animate({opacity:"show"},q,function(){l[0]||T()}))),m>=u)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,G,function(){T()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,G,function(){T()}).siblings().animate({opacity:"hide"},q,G);break;case"top":l.stop(!0,!1).animate({top:-p*t*C},q,G,function(){T()});break;case"left":l.stop(!0,!1).animate({left:-p*t*D},q,G,function(){T()});break;case"leftLoop":var b=O;l.stop(!0,!0).animate({left:-($(O)+P)*D},q,G,function(){-1>=b?l.css("left",-(P+(k-1)*t)*D):b>=k&&l.css("left",-P*D),T()});break;case"topLoop":var b=O;l.stop(!0,!0).animate({top:-($(O)+P)*C},q,G,function(){-1>=b?l.css("top",-(P+(k-1)*t)*C):b>=k&&l.css("top",-P*C),T()});break;case"leftMarquee":var c=l.css("left").replace("px","");0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*D)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+P)*D&&l.css("left",-P*D)});break;case"topMarquee":var d=l.css("top").replace("px","");0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*C)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+P)*C&&l.css("top",-P*C)})}j.removeClass(K).eq(p).addClass(K),M=p,y||(g.removeClass("nextStop"),f.removeClass("prevStop"),0==p&&f.addClass("prevStop"),p==k-1&&g.addClass("nextStop")),h.html("<span>"+(p+1)+"</span>/"+k)}};A&&ab(!0),B&&d.hover(function(){clearTimeout(J)},function(){J=setTimeout(function(){p=N,A?ab():"slideDown"==e?Q.slideUp(q,U):Q.animate({opacity:"hide"},q,U),M=p},300)});var bb=function(a){H=setInterval(function(){w?p--:p++,ab()},a?a:r)},cb=function(a){H=setInterval(ab,a?a:r)},db=function(){z||(clearInterval(H),bb())},eb=function(){(y||p!=k-1)&&(p++,ab(),R||db())},fb=function(){(y||0!=p)&&(p--,ab(),R||db())},gb=function(){clearInterval(H),R?cb():bb(),i.removeClass("pauseState")},hb=function(){clearInterval(H),i.addClass("pauseState")};if(v?R?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(R&&(w?p--:p++),i.addClass("pauseState")),i.click(function(){i.hasClass("pauseState")?gb():hb()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);I=setTimeout(function(){p=a,ab(),db()},c.triggerTime)},function(){clearTimeout(I)}):j.click(function(){p=j.index(this),ab(),db()}),R){if(g.mousedown(eb),f.mousedown(fb),y){var ib,jb=function(){ib=setTimeout(function(){clearInterval(H),cb(0^r/10)},150)},kb=function(){clearTimeout(ib),clearInterval(H),cb()};g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}"mouseover"==c.trigger&&(g.hover(eb,function(){}),f.hover(fb,function(){}))}else g.click(eb),f.click(fb)})}}(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return 0==b?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=e*.3*1.5),h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeInOutBounce:function(a,b,c,d,e){return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}});
View Code

未压缩js文件

技术分享
  1 /*!
  2  * SuperSlide v2.1.1 
  3  * 轻松解决网站大部分特效展示问题
  4  * 详尽信息请看官网:http://www.SuperSlide2.com/
  5  *
  6  * Copyright 2011-2013, 大话主席
  7  *
  8  * 请尊重原创,保留头部版权
  9  * 在保留版权的前提下可应用于个人或商业用途
 10 
 11  * v2.1.1:修复当调用多个SuperSlide,并设置returnDefault:true 时返回defaultIndex索引错误
 12 
 13  */
 14 
 15 (function($){
 16     $.fn.slide=function(options){
 17         $.fn.slide.defaults={
 18         type:"slide", 
 19         effect:"fade", 
 20         autoPlay:false, 
 21         delayTime:500, 
 22         interTime:2500,
 23         triggerTime:150,
 24         defaultIndex:0,
 25         titCell:".hd li",
 26         mainCell:".bd",
 27         targetCell:null,
 28         trigger:"mouseover",
 29         scroll:1,
 30         vis:1,
 31         titOnClassName:"on",
 32         autoPage:false, 
 33         prevCell:".prev",
 34         nextCell:".next",
 35         pageStateCell:".pageState",
 36         opp: false, 
 37         pnLoop:true, 
 38         easing:"swing", 
 39         startFun:null,
 40         endFun:null,
 41         switchLoad:null,
 42 
 43         playStateCell:".playState",
 44         mouseOverStop:true,
 45         defaultPlay:true,
 46         returnDefault:false 
 47         };
 48 
 49         return this.each(function() {
 50 
 51             var opts = $.extend({},$.fn.slide.defaults,options);
 52             var slider = $(this);
 53             var effect = opts.effect;
 54             var prevBtn = $(opts.prevCell, slider);
 55             var nextBtn = $(opts.nextCell, slider);
 56             var pageState = $(opts.pageStateCell, slider);
 57             var playState = $(opts.playStateCell, slider);
 58 
 59             var navObj = $(opts.titCell, slider);//导航子元素结合
 60             var navObjSize = navObj.size();
 61             var conBox = $(opts.mainCell , slider);//内容元素父层对象
 62             var conBoxSize=conBox.children().size();
 63             var sLoad=opts.switchLoad;
 64             var tarObj = $(opts.targetCell, slider);
 65 
 66             /*字符串转换*/
 67             var index=parseInt(opts.defaultIndex);
 68             var delayTime=parseInt(opts.delayTime);
 69             var interTime=parseInt(opts.interTime);
 70             var triggerTime=parseInt(opts.triggerTime);
 71             var scroll=parseInt(opts.scroll);
 72             var vis=parseInt(opts.vis);
 73             var autoPlay = (opts.autoPlay=="false"||opts.autoPlay==false)?false:true;
 74             var opp = (opts.opp=="false"||opts.opp==false)?false:true;
 75             var autoPage = (opts.autoPage=="false"||opts.autoPage==false)?false:true;
 76             var pnLoop = (opts.pnLoop=="false"||opts.pnLoop==false)?false:true;
 77             var mouseOverStop = (opts.mouseOverStop=="false"||opts.mouseOverStop==false)?false:true;
 78             var defaultPlay = (opts.defaultPlay=="false"||opts.defaultPlay==false)?false:true;
 79             var returnDefault = (opts.returnDefault=="false"||opts.returnDefault==false)?false:true;
 80 
 81             var slideH=0;
 82             var slideW=0;
 83             var selfW=0;
 84             var selfH=0;
 85             var easing=opts.easing;
 86             var inter=null;//autoPlay-setInterval 
 87             var mst =null;//trigger-setTimeout
 88             var rtnST=null;//returnDefault-setTimeout
 89             var titOn = opts.titOnClassName;
 90 
 91             var onIndex = navObj.index( slider.find( "."+titOn) );
 92             var oldIndex = index = onIndex==-1?index:onIndex;
 93             var defaultIndex = index;
 94 
 95 
 96             var _ind = index;
 97             var cloneNum = conBoxSize>=vis?( conBoxSize%scroll!=0?conBoxSize%scroll:scroll):0; 
 98             var _tar;
 99             var isMarq = effect=="leftMarquee" || effect=="topMarquee"?true:false;
100 
101             var doStartFun=function(){ if ( $.isFunction( opts.startFun) ){ opts.startFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
102             var doEndFun=function(){ if ( $.isFunction( opts.endFun ) ){ opts.endFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
103             var resetOn=function(){ navObj.removeClass(titOn); if( defaultPlay ) navObj.eq(defaultIndex).addClass(titOn)  }
104 
105 
106 
107             //单独处理菜单效果
108             if( opts.type=="menu" ){
109 
110                 if( defaultPlay ){ navObj.removeClass(titOn).eq(index).addClass(titOn); }
111                 navObj.hover(
112                         function(){
113                             _tar=$(this).find( opts.targetCell );
114                             var hoverInd =navObj.index($(this));
115                         
116                             mst = setTimeout(function(){  
117                                 index=hoverInd;
118                                 navObj.removeClass(titOn).eq    (index).addClass(titOn);
119                                 doStartFun();
120                                 switch (effect)
121                                 {
122                                     case "fade":_tar.stop(true,true).animate({opacity:"show"}, delayTime,easing,doEndFun ); break;
123                                     case "slideDown":_tar.stop(true,true).animate({height:"show"}, delayTime,easing,doEndFun ); break;
124                                 }
125                             } ,opts.triggerTime);
126 
127                         },function(){
128                             clearTimeout(mst);
129                             switch (effect){ case "fade":_tar.animate( {opacity:"hide"},delayTime,easing ); break; case "slideDown":_tar.animate( {height:"hide"},delayTime,easing ); break; }
130                         }
131                 );
132 
133                 if (returnDefault){ 
134                     slider.hover(function(){clearTimeout(rtnST);},function(){ rtnST = setTimeout( resetOn,delayTime ); });
135                 }
136                 
137 
138                 return;
139             }
140 
141             
142             //处理分页
143             if( navObjSize==0 )navObjSize=conBoxSize;//只有左右按钮
144             if( isMarq ) navObjSize=2;
145             if( autoPage ){
146                 if(conBoxSize>=vis){
147                     if( effect=="leftLoop" || effect=="topLoop" ){ navObjSize=conBoxSize%scroll!=0?(conBoxSize/scroll^0)+1:conBoxSize/scroll; }
148                     else{ 
149                             var tempS = conBoxSize-vis;
150                             navObjSize=1+parseInt(tempS%scroll!=0?(tempS/scroll+1):(tempS/scroll)); 
151                             if(navObjSize<=0)navObjSize=1; 
152                     }
153                 }
154                 else{ navObjSize=1 }
155                 
156                 navObj.html(""); 
157                 var str="";
158 
159                 if( opts.autoPage==true || opts.autoPage=="true" ){ for( var i=0; i<navObjSize; i++ ){ str+="<li>"+(i+1)+"</li>" } }
160                 else{ for( var i=0; i<navObjSize; i++ ){ str+=opts.autoPage.replace("$",(i+1))  } }
161                 navObj.html(str); 
162                 
163                 var navObj = navObj.children();//重置导航子元素对象
164             }
165 
166 
167             if(conBoxSize>=vis){ //当内容个数少于可视个数,不执行效果。
168                 conBox.children().each(function(){ //取最大值
169                     if( $(this).width()>selfW ){ selfW=$(this).width(); slideW=$(this).outerWidth(true);  }
170                     if( $(this).height()>selfH ){ selfH=$(this).height(); slideH=$(this).outerHeight(true);  }
171                 });
172 
173                 var _chr = conBox.children();
174                 var cloneEle = function(){ 
175                     for( var i=0; i<vis ; i++ ){ _chr.eq(i).clone().addClass("clone").appendTo(conBox); } 
176                     for( var i=0; i<cloneNum ; i++ ){ _chr.eq(conBoxSize-i-1).clone().addClass("clone").prependTo(conBox); }
177                 }
178                 
179                 switch(effect)
180                 {
181                     case "fold": conBox.css({"position":"relative","width":slideW,"height":slideH}).children().css( {"position":"absolute","width":selfW,"left":0,"top":0,"display":"none"} ); break;
182                     case "top": conBox.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; height:‘+vis*slideH+‘px"></div>‘).css( { "top":-(index*scroll)*slideH, "position":"relative","padding":"0","margin":"0"}).children().css( {"height":selfH} ); break;
183                     case "left": conBox.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; width:‘+vis*slideW+‘px"></div>‘).css( { "width":conBoxSize*slideW,"left":-(index*scroll)*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0"}).children().css( {"float":"left","width":selfW} ); break;
184                     case "leftLoop":
185                     case "leftMarquee":
186                         cloneEle();
187                         conBox.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; width:‘+vis*slideW+‘px"></div>‘).css( { "width":(conBoxSize+vis+cloneNum)*slideW,"position":"relative","overflow":"hidden","padding":"0","margin":"0","left":-(cloneNum+index*scroll)*slideW}).children().css( {"float":"left","width":selfW}  ); break;
188                     case "topLoop":
189                     case "topMarquee":
190                         cloneEle();
191                         conBox.wrap(‘<div class="tempWrap" style="overflow:hidden; position:relative; height:‘+vis*slideH+‘px"></div>‘).css( { "height":(conBoxSize+vis+cloneNum)*slideH,"position":"relative","padding":"0","margin":"0","top":-(cloneNum+index*scroll)*slideH}).children().css( {"height":selfH} ); break;
192                 }
193             }
194 
195 
196 
197             //针对leftLoop、topLoop的滚动个数
198             var scrollNum=function(ind){ 
199                 var _tempCs= ind*scroll; 
200                 if( ind==navObjSize ){ _tempCs=conBoxSize; }else if( ind==-1 && conBoxSize%scroll!=0){ _tempCs=-conBoxSize%scroll; }
201                 return _tempCs;
202             }
203 
204             //切换加载
205             var doSwitchLoad=function(objs){ 
206 
207                     var changeImg=function(t){
208                         for ( var i= t; i<( vis+ t); i++ ){
209                                 objs.eq(i).find("img["+sLoad+"]").each(function(){ 
210                                     var _this =  $(this);
211                                     _this.attr("src",_this.attr(sLoad)).removeAttr(sLoad);
212                                     if( conBox.find(".clone")[0] ){ //如果存在.clone
213                                         var chir = conBox.children();
214                                         for ( var j=0 ; j< chir.size() ; j++ )
215                                         {
216                                             chir.eq(j).find("img["+sLoad+"]").each(function(){
217                                                 if( $(this).attr(sLoad)==_this.attr("src") ) $(this).attr("src",$(this).attr(sLoad)).removeAttr(sLoad) 
218                                             })
219                                         }
220                                     }
221                                 })
222                             }
223                     }
224 
225                     switch(effect)
226                     {
227                         case "fade": case "fold": case "top": case "left": case "slideDown":
228                             changeImg( index*scroll );
229                             break;
230                         case "leftLoop": case "topLoop":
231                             changeImg( cloneNum+scrollNum(_ind) );
232                             break;
233                         case "leftMarquee":case "topMarquee": 
234                             var curS = effect=="leftMarquee"? conBox.css("left").replace("px",""):conBox.css("top").replace("px",""); 
235                             var slideT = effect=="leftMarquee"? slideW:slideH; 
236                             var mNum=cloneNum;
237                             if( curS%slideT!=0 ){
238                                 var curP = Math.abs(curS/slideT^0);
239                                 if( index==1 ){ mNum=cloneNum+curP }else{  mNum=cloneNum+curP-1  }
240                             }
241                             changeImg( mNum );
242                             break;
243                     }
244             }//doSwitchLoad end
245 
246 
247             //效果函数
248             var doPlay=function(init){
249                  // 当前页状态不触发效果
250                 if( defaultPlay && oldIndex==index && !init && !isMarq ) return;
251                 
252                 //处理页码
253                 if( isMarq ){ if ( index>= 1) { index=1; } else if( index<=0) { index = 0; } }
254                 else{ 
255                     _ind=index; if ( index >= navObjSize) { index = 0; } else if( index < 0) { index = navObjSize-1; }
256                 }
257 
258                 doStartFun();
259 
260                 //处理切换加载
261                 if( sLoad!=null ){ doSwitchLoad( conBox.children() ) }
262 
263                 //处理targetCell
264                 if(tarObj[0]){ 
265                     _tar = tarObj.eq(index);
266                     if( sLoad!=null ){ doSwitchLoad( tarObj ) }
267                     if( effect=="slideDown" ){
268                             tarObj.not(_tar).stop(true,true).slideUp(delayTime); 
269                             _tar.slideDown( delayTime,easing,function(){ if(!conBox[0]) doEndFun() }); 
270                     }
271                     else{
272                             tarObj.not(_tar).stop(true,true).hide();
273                             _tar.animate({opacity:"show"},delayTime,function(){ if(!conBox[0]) doEndFun() }); 
274                     }
275                 }
276                 
277                 if(conBoxSize>=vis){ //当内容个数少于可视个数,不执行效果。
278                     switch (effect)
279                     {
280                         case "fade":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().hide(); break;
281                         case "fold":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().animate({opacity:"hide"},delayTime,easing);break;
282                         case "top":conBox.stop(true,false).animate({"top":-index*scroll*slideH},delayTime,easing,function(){doEndFun()});break;
283                         case "left":conBox.stop(true,false).animate({"left":-index*scroll*slideW},delayTime,easing,function(){doEndFun()});break;
284                         case "leftLoop":
285                             var __ind = _ind;
286                             conBox.stop(true,true).animate({"left":-(scrollNum(_ind)+cloneNum)*slideW},delayTime,easing,function(){
287                                 if( __ind<=-1 ){ conBox.css("left",-(cloneNum+(navObjSize-1)*scroll)*slideW);  }else if( __ind>=navObjSize ){ conBox.css("left",-cloneNum*slideW); }
288                                 doEndFun();
289                             });
290                             break;//leftLoop end
291 
292                         case "topLoop":
293                             var __ind = _ind;
294                             conBox.stop(true,true).animate({"top":-(scrollNum(_ind)+cloneNum)*slideH},delayTime,easing,function(){
295                                 if( __ind<=-1 ){ conBox.css("top",-(cloneNum+(navObjSize-1)*scroll)*slideH);  }else if( __ind>=navObjSize ){ conBox.css("top",-cloneNum*slideH); }
296                                 doEndFun();
297                             });
298                             break;//topLoop end
299 
300                         case "leftMarquee":
301                             var tempLeft = conBox.css("left").replace("px",""); 
302                             if(index==0 ){
303                                     conBox.animate({"left":++tempLeft},0,function(){
304                                         if( conBox.css("left").replace("px","")>= 0){ conBox.css("left",-conBoxSize*slideW) }
305                                     });
306                             }
307                             else{
308                                     conBox.animate({"left":--tempLeft},0,function(){
309                                         if(  conBox.css("left").replace("px","")<= -(conBoxSize+cloneNum)*slideW){ conBox.css("left",-cloneNum*slideW) }
310                                     });
311                             }break;// leftMarquee end
312 
313                             case "topMarquee":
314                             var tempTop = conBox.css("top").replace("px",""); 
315                             if(index==0 ){
316                                     conBox.animate({"top":++tempTop},0,function(){
317                                         if( conBox.css("top").replace("px","")>= 0){ conBox.css("top",-conBoxSize*slideH) }
318                                     });
319                             }
320                             else{
321                                     conBox.animate({"top":--tempTop},0,function(){
322                                         if(  conBox.css("top").replace("px","")<= -(conBoxSize+cloneNum)*slideH){ conBox.css("top",-cloneNum*slideH) }
323                                     });
324                             }break;// topMarquee end
325 
326                     }//switch end
327                 }
328 
329                     navObj.removeClass(titOn).eq(index).addClass(titOn);
330                     oldIndex=index;
331                     if( !pnLoop ){ //pnLoop控制前后按钮是否继续循环
332                         nextBtn.removeClass("nextStop"); prevBtn.removeClass("prevStop");
333                         if (index==0 ){ prevBtn.addClass("prevStop"); }
334                         if (index==navObjSize-1 ){ nextBtn.addClass("nextStop"); }
335                     }
336 
337                     pageState.html( "<span>"+(index+1)+"</span>/"+navObjSize);
338 
339             };// doPlay end
340 
341             //初始化执行
342             if( defaultPlay ){ doPlay(true); }
343 
344             if (returnDefault)//返回默认状态
345             {
346                 slider.hover(function(){ clearTimeout(rtnST) },function(){
347                         rtnST = setTimeout( function(){
348                             index=defaultIndex;
349                             if(defaultPlay){ doPlay(); }
350                             else{
351                                 if( effect=="slideDown" ){ _tar.slideUp( delayTime, resetOn ); }
352                                 else{ _tar.animate({opacity:"hide"},delayTime,resetOn ); }
353                             }
354                             oldIndex=index;
355                         },300 );
356                 });
357             }
358             
359             ///自动播放函数
360             var setInter = function(time){ inter=setInterval(function(){  opp?index--:index++; doPlay() }, !!time?time:interTime);  }
361             var setMarInter = function(time){ inter = setInterval(doPlay, !!time?time:interTime);  }
362             // 处理mouseOverStop
363             var resetInter = function(){ if( !mouseOverStop ){clearInterval(inter); setInter() } }
364             // 前后按钮触发
365             var nextTrigger = function(){ if ( pnLoop || index!=navObjSize-1 ){ index++; doPlay(); if(!isMarq)resetInter(); } }
366             var prevTrigger = function(){ if ( pnLoop || index!=0 ){ index--; doPlay(); if(!isMarq)resetInter(); } }
367             //处理playState
368             var playStateFun = function(){ clearInterval(inter); isMarq?setMarInter():setInter(); playState.removeClass("pauseState") }
369             var pauseStateFun = function(){ clearInterval(inter);playState.addClass("pauseState"); }
370 
371             //自动播放
372             if (autoPlay) {
373                     if( isMarq ){ 
374                         opp?index--:index++; setMarInter();
375                         if(mouseOverStop) conBox.hover(pauseStateFun,playStateFun);
376                     }else{
377                         setInter();
378                         if(mouseOverStop) slider.hover( pauseStateFun,playStateFun );
379                     }
380             }
381             else{ if( isMarq ){ opp?index--:index++; } playState.addClass("pauseState"); }
382 
383             playState.click(function(){  playState.hasClass("pauseState")?playStateFun():pauseStateFun()  });
384 
385             //titCell事件
386             if(opts.trigger=="mouseover"){
387                 navObj.hover(function(){ var hoverInd = navObj.index(this);  mst = setTimeout(function(){  index=hoverInd; doPlay(); resetInter();  },opts.triggerTime); }, function(){ clearTimeout(mst) });
388             }else{ navObj.click(function(){ index=navObj.index(this); doPlay(); resetInter(); })  }
389 
390             //前后按钮事件
391             if (isMarq){
392                 
393                 nextBtn.mousedown(nextTrigger);
394                 prevBtn.mousedown(prevTrigger);
395                 //前后按钮长按10倍加速
396                 if (pnLoop)
397                 {    
398                     var st;
399                     var marDown = function(){ st=setTimeout(function(){ clearInterval(inter); setMarInter( interTime/10^0 ) },150) }
400                     var marUp = function(){ clearTimeout(st); clearInterval(inter); setMarInter() }
401                     nextBtn.mousedown(marDown); nextBtn.mouseup(marUp);
402                     prevBtn.mousedown(marDown); prevBtn.mouseup(marUp);
403                 }
404                 //前后按钮mouseover事件
405                 if( opts.trigger=="mouseover"  ){ nextBtn.hover(nextTrigger,function(){}); prevBtn.hover(prevTrigger,function(){}); }
406             }else{
407                 nextBtn.click(nextTrigger);
408                 prevBtn.click(prevTrigger);
409             }
410 
411         });//each End
412 
413     };//slide End
414 
415 })(jQuery);
416 
417 jQuery.easing[‘jswing‘] = jQuery.easing[‘swing‘];
418 jQuery.extend( jQuery.easing,
419 {
420     def: ‘easeOutQuad‘,
421     swing: function (x, t, b, c, d) { return jQuery.easing[jQuery.easing.def](x, t, b, c, d); },
422     easeInQuad: function (x, t, b, c, d) {return c*(t/=d)*t + b;},
423     easeOutQuad: function (x, t, b, c, d) {return -c *(t/=d)*(t-2) + b},
424     easeInOutQuad: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t + b;return -c/2 * ((--t)*(t-2) - 1) + b},
425     easeInCubic: function (x, t, b, c, d) {return c*(t/=d)*t*t + b},
426     easeOutCubic: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b},
427     easeInOutCubic: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b},
428     easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b},
429     easeOutQuart: function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b},
430     easeInOutQuart: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t + b;return -c/2 * ((t-=2)*t*t*t - 2) + b},
431     easeInQuint: function (x, t, b, c, d) {return c*(t/=d)*t*t*t*t + b},
432     easeOutQuint: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t*t*t + 1) + b},
433     easeInOutQuint: function (x, t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;return c/2*((t-=2)*t*t*t*t + 2) + b},
434     easeInSine: function (x, t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b},
435     easeOutSine: function (x, t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b},
436     easeInOutSine: function (x, t, b, c, d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b},
437     easeInExpo: function (x, t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b},
438     easeOutExpo: function (x, t, b, c, d) {return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b},
439     easeInOutExpo: function (x, t, b, c, d) {if (t==0) return b;if (t==d) return b+c;if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b},
440     easeInCirc: function (x, t, b, c, d) {return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b},
441     easeOutCirc: function (x, t, b, c, d) {return c * Math.sqrt(1 - (t=t/d-1)*t) + b},
442     easeInOutCirc: function (x, t, b, c, d) {if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b},
443     easeInElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
444         else var s = p/(2*Math.PI) * Math.asin (c/a);return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b},
445     easeOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }
446         else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b},
447     easeInOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);if (a < Math.abs(c)) { a=c; var s=p/4; }
448         else var s = p/(2*Math.PI) * Math.asin (c/a);if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b},
449     easeInBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b},
450     easeOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b},
451     easeInOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158; 
452         if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b},
453     easeInBounce: function (x, t, b, c, d) {return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b},
454     easeOutBounce: function (x, t, b, c, d) {if ((t/=d) < (1/2.75)) {    return c*(7.5625*t*t) + b;} else if (t < (2/2.75)) {    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} else if (t < (2.5/2.75)) {    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;} else {    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}},
455     easeInOutBounce: function (x, t, b, c, d) {if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;}
456 });
View Code

css文件

技术分享
  1 @charset "utf-8";
  2 
  3 /* CSS Document */
  4 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
  5 form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
  6 fieldset,img { border: 0; }
  7 address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; }
  8 ol,ul,li { list-style: none; }
  9 caption,th { text-align: left; }
 10 h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
 11 q:before,q:after { content:‘‘; }
 12 abbr,acronym { border: 0; }
 13 
 14 /*-- All --*/
 15 html{ min-width:1000px; }
 16 body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff;  }
 17 a{ color:#333; text-decoration:none; outline:none;}
 18 a:hover {color:#f00; text-decoration:underline; }
 19 table { border-collapse: collapse; border-spacing: 0; empty-cells:show; }
 20 table td,table th{ border:#ddd solid 1px; padding: 5px 0; }
 21 table th{ background:#39A4DC; color:#fff;  }
 22 table .new td{ color:#f60; font-weight:bold;  }
 23 
 24 
 25 /* css三角形 */
 26 .arrow,.arrow s { position:relative;  display:block; font-size: 0; line-height: 0; width: 0; height: 0; border-color:transparent; border-style:dashed; border-width:5px; }
 27 .arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }
 28 .arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }
 29 .arrowR:hover{ border-left-color:#f60;  }
 30 
 31 .arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }
 32 .arrowL s{ border-right-color:#fff; position:absolute; right:-7px; top:-5px; }
 33 .arrowL:hover{ border-right-color:#f60;  }
 34 
 35 .arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }
 36 .arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }
 37 .arrowT:hover{ border-bottom-color:#f60;  }
 38 
 39 .arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }
 40 .arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottom:-3px; }
 41 .arrowB:hover{ border-top-color:#f60;  }
 42 
 43 /* css圆形 */
 44 .circle{ line-height:100%; overflow:hidden;  font-family:Tahoma,Helvetica; font-size:18px; color:#aaa;  }
 45 .circle:hover{ color:#f60;  }
 46 
 47 /* 顶部导航条 */
 48     #header{ width:100%; left:0; top:0; position:fixed; z-index:10;  height:32px; line-height:32px; color:#fff; text-align:left; overflow:hidden; }
 49     #header .headerBg{ width:100%; height:32px; left:0; top:0; position:absolute; z-index:0; background:#000; filter:alpha(opacity=70);opacity:0.7;   }
 50     #header a{ color:#fff;  }
 51     #header #logo{ position:relative; z-index:1; display:inline-block; *display:inline; zoom:1; font-size:14px; margin-right:5px; padding-left:10px;   }
 52     #header .nav{ position:relative; z-index:2; float:right; padding-right:10px; }
 53     #header .nav a{ padding:0 10px;  }
 54     #header .nav a.imp{ color:#ff0;  }
 55     #header .title{ position:relative; z-index:1; height:32px; overflow:hidden;   }
 56 
 57     #content{ margin:0 auto; padding:62px 30px 30px 30px;  position:relative; text-align:left; z-index:0; }
 58     #footer{ height:34px; line-height:34px; text-align:center; }
 59 
 60 /* 首页 - index.html  ---------------------------------------------- */
 61 
 62 
 63 
 64     .indBtn{ text-align:center; display:none;  }
 65     .indBtn a{ vertical-align:middle; margin:15px 15px 0 0; display:inline-block; *display:inline; zoom:1; padding:14px 22px 3px 22px;  line-height:26px;
 66         color:#bede9a; font-size:14px;
 67         -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
 68         background:#89c941;
 69         background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89c941), to(#72b238));
 70         background: -webkit-linear-gradient(#89c941, #72b238);
 71         background: -moz-linear-gradient(#89c941, #72b238);
 72         background: -ms-linear-gradient(#89c941, #72b238);
 73         background: -o-linear-gradient(#89c941, #72b238);
 74         background: linear-gradient(#89c941, #72b238);
 75         -pie-background: linear-gradient(#89c941, #72b238);
 76         -webkit-box-shadow: #39591c 2px 2px 3px;
 77         -moz-box-shadow: #39591c 2px 2px 3px;
 78         box-shadow: #39591c 2px 2px 3px;
 79     }
 80     .indBtn a em{ font-size:30px; display:block; color:#fff;  }
 81     .indIntro a:hover{ text-decoration:none; margin:11px 15px 0 0; }
 82 
 83     .indTips{ position:fixed; _position:absolute; width:14px; right:0; top:90px; background:#333; padding:5px; line-height:18px; color:#fff; cursor:pointer;
 84         -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
 85     }
 86     .indTips a{ color:#fff; text-decoration:none;   }
 87     #indTips1{ display:none;  }
 88     #ind2{ display:none;  }
 89     #ind2 .topic{ font-size:60px; height:120px; line-height:120px;   }
 90 
 91 /* 参数 - param.html ---------------------------------------------- */
 92     .paramPage .param{ width:100%;  margin-bottom:20px;  background:#fff;  }
 93     .paramPage .param th{ text-align:center;  }
 94     .paramPage .param td{ text-align:left; padding:5px 2px;   }
 95     .paramPage .param .intro{ text-align:left;  }
 96     .paramPage .param .link{ color:#39A4DC; text-decoration:underline;   }
 97     .paramPage .param .t b{ color:#f60;  }
 98     .paramPage .param i{ color:#f60;   }
 99     .paramPage .param .on td{ background:#ffffaa;  }
100     /*.paramPage .param tr.n td{ color:#999;  }*/
101     .paramPage .intro a{ text-decoration:underline;  }
102     .paramPage .notice{ overflow:hidden;  text-align:left; padding-bottom:10px;  }
103     .paramPage .notice li{ width:120px; height:30px; line-height:30px; text-align:center; float:left; margin-right:10px; color:#fff; background:#666; cursor:pointer; }
104     .paramPage .notice .on{ background:#f60;   }
105 
106 
107 /* 联系作者 ---------------------------------------------- */
108     #content .contact{ display:none;  color:#f60;  margin-bottom:20px;  }
109 
110 
111 /* 案例 - demo.html ---------------------------------------------- */
112 
113     .demoBox{  padding:0 20px 60px 20px;  background:#f2f2f2; border-bottom:3px dotted #ccc;   }
114     .demoBox .hd{ padding:40px 10px 0 10px;  }
115     .demoBox .hd h3{ font-size:30px; font-weight:bold; color:#39A4DC; line-height:60px; }
116     .demoBox .hd h3 span{ color:#ccc; font-style:italic; font-size:60px;  }
117     .demoBox .bd{ padding:20px; overflow:hidden; zoom:1;  }
118     .demoBox .bd .iframeWrap{ overflow:hidden; float:left;  }
119     .demoBox iframe{ width:100%; height:100%;  vertical-align:middle; }
120     .demoBox .botTit{ height:22px; line-height:22px; overflow:hidden; background:#eee; text-align:right; padding:5px 0; overflow:hidden; display:none; 
121     }
122     .demoBox .botTit em{ float:left; font-weight:bold; padding-left:10px;  }
123     .demoBox .botTit span a{ display:block; float:right; height:20px; line-height:20px; padding:0 5px; background:#f60; margin-right:10px; color:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; display:none;  }
124     .demoBox .botTit span a:hover{ text-decoration:none; background:#f60;  }
125 
126     .params{ width:580px; height:100%; margin-left:20px; float:left; _display:inline; background:#fff; padding-bottom:10px; border:1px solid #ddd; }
127     .params table{ background:#fff;   }
128     .params table .tit td{ padding: 5px 10px; background:#39A4DC; color:#fff;    }
129     .params table td{ border:1px solid #fff;  }
130     .params table .n{  width: 153px; text-align:right;   }
131     .params table .new{ color:#f00;   }
132     .params table i{ color:#999;  }
133     .params p{ padding:10px 0 0 10px;  }
134     .params .curJsCode{ color:#f60; display:block; font-family:SimSun;  }
135 
136     .rightNav{ position:fixed; width:140px;  right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);  }
137     .rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden;  cursor:pointer; right:-110px; }
138     .rightNav a:hover{ text-decoration:none; color:#39A4DC;  }
139     .rightNav a:hover em{ background:#00b700}
140     .rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
141     .rightNav a.new em{ background:#f60;  }
142     .demoBox .iframeWrap{ width:452px;  }
143     .demoBox .iframeWrap iframe{ width:452px; height:232px;  background:url(images/loading.gif) center center no-repeat; }
144 
145     #picScroll-left iframe{  height:174px;  }
146     #picScroll-top iframe{  height:415px;  }
147     #picMarquee-left iframe{  height:172px;  }
148     #picMarquee-top iframe{  height:415px;  }
149     #txtScroll-left iframe{  height:80px;  }
150     #txtScroll-top iframe{  height:182px;  }
151     #txtMarquee-left iframe{  height:107px;  }
152     #txtMarquee-top iframe{  height:184px;  }
153     #sideMenu iframe{  height:227px;  }
154 
155 
156     /* 隐藏代码盒子 */
157     #displayBox{ z-index:10; display:none; position:fixed; _position:absolute;   width:1000px; height:500px;   left:50%; top:60px; margin-left:-500px; background:#fff;
158     border:5px solid #eee; 
159     -webkit-box-shadow: #333 0 0 8px;
160     -moz-box-shadow: #333 0 0 8px;
161     box-shadow: #333 0 0 8px; }
162     #displayBox .hd{ height:30px; line-height:30px; background:#eee; padding:0 10px; position:relative;
163         background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#eee));
164         background: -webkit-linear-gradient(#F7F7F7, #eee);
165         background: -moz-linear-gradient(#F7F7F7, #eee);
166         background: -ms-linear-gradient(#F7F7F7, #eee);
167         background: -o-linear-gradient(#F7F7F7, #eee);
168         background: linear-gradient(#F7F7F7, #eee);
169     }
170     #displayBox .hd h3{ font-weight:bold; color:#39A4DC;  }
171     #displayBox .hd a{ display:block; position:absolute; right:10px; top:7px; width:20px; height:16px; line-height:16px; text-align:center;  background:#f60; color:#fff; cursor:pointer; }
172     #displayBox .hd a:hover{ text-decoration:none; }
173     #displayBox .bd{ padding:10px 0;  background:#fff;  }
174     #displayBox textarea{ width:458px; height:230px; padding:10px;  border:1px solid #ccc; display:block; }
175     #displayBox .bd p{ padding-top:10px;  }
176     #displayBox iframe{ width:1000px; height:440px; margin:0 auto;  }
177 
178 
179 /* 扩展效果 ---------------------------------------------- */
180 .authorWord{ margin-bottom:25px;   text-align:left; background:#fff; }
181 .authorWord h3{ padding:0 20px;  height:30px;  font:normal 14px/30px "Microsoft YaHei"; overflow:hidden; cursor:pointer; border-bottom:1px dotted #ccc; }
182 .authorWord h3 .arrow{ float:right; border-top-color:#fff; margin-top:11px;  }
183 .authorWord .con{ padding:10px 20px; line-height:22px;  }
184 .authorWord .con p{ margin-bottom:5px }
185 .authorWord a{ color:#f60; text-decoration:underline;   }
186 
187 .demoList{ overflow:hidden; padding-top:10px;    }
188 .demoList li{
189         position:relative;  cursor:pointer; float:left; width:160px;  text-align:center; margin:0 30px 30px 0; 
190         padding:4px 4px 0 4px; background:#e3e3e3; color:#000; 
191 }
192 .demoList li img{ display:block; width:160px; height:120px; background:url(images/loading.gif) center center no-repeat;  }
193 .demoList li h3{ height:28px; line-height:28px;  }
194 .demoList li.new i{ display:block; position:absolute; top:4px; right:4px; z-index:1; width:31px; height:31px;  background:url(images/new.png) 0 0 no-repeat;  }
195 
196 .demoList li.on{     
197     background:#666; color:#fff; 
198     -webkit-transform: translateY(-10px);
199     -moz-transform: translateY(-10px);
200     -o-transform: translateY(-10px);
201     -webkit-transition-duration:0.3s;
202     -o-transition-duration:0.3s;
203     -moz-transition-duration:0.3s;
204     }
205 
206 
207     .demoBoxEven{ background:#fff;  }
208     .demoBoxEven .demoList li{     }
209     .demoBoxEven .demoList li.on{  background:#666; color:#fff;  }
210 
211 /* 如何使用 ---------------------------------------------- */
212 .usePageDl{ width:1000px;  }
213 .usePageDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC;  }
214 .usePageDl dt h2 a{ color:#f60; text-decoration:underline;   }
215 .usePageDl dt p{ padding:5px 0 10px 33px;  }
216 .usePageDl dt p b{ color:#f60;  }
217 .usePageDl dd{ margin-bottom:50px;  }
218 .usePage .demoBox{ padding:0;  }
219 .usePage .demoBox .bd .iframeWrap{ background:none;  }
220 
221 
222 /* 下载页面 ----------------------------------------------- */
223 .downLoadDl{ width:1000px;  }
224 .downLoadDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC;  }
225 .downLoadDl dt h2 a{ font-size:12px; color:#333; margin-left:20px; text-decoration:underline;    }
226 .downLoadDl dd{ margin-bottom:50px; padding:10px 0;  }
227 
228 .dBtn{ cursor:pointer; display:block;  height:30px; line-height:30px; width:100px; text-align:center; font-size:16px;  background:#6ddb00; color:#fff; _font-weight:bold;
229     -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
230     -webkit-box-shadow: #666 1px 1px 2px;
231     -moz-box-shadow: #666 1px 1px 2px;
232     box-shadow: #666 1px 1px 2px;
233 }
234 .dBtn:hover{ text-decoration:none; background:#65ca00; color:#fff; margin-left:2px;   }
235 .pBtn{ background:#FFA241; font-size:12px; }
236 .pBtn:hover{ background:#ff8635;  }
237 .pBtn i{ font-family:Arial; _font-weight:bold; font-size:20px; }
238 
239 .downPage .inculde{ margin-top:20px; padding:10px; border:1px dotted #eee; background:#f3f3f3;}
240 .downPage .inculde li{ color:#666;  }
241 .downPage .inculde em{ font-weight:bold; color:#333;  }
242 .downPage .inculde h3{ font-size:14px; font-weight:bold; color:#c00; padding-bottom:10px  }
243 .downPage .inculde a{ color:#39A4DC; text-decoration:underline; margin:0 2px;   }
244 #whyPay p,#howPay p{ text-indent:20px; margin-bottom:10px  }
245 
246 .pay{ overflow:hidden; padding-bottom:5px; vertical-align:top;  }
247 .pay .pBtn{ float:left;  }
248 .pay p{ margin-left:120px;  }
249 .pay p span{ color:#c00;  }
250 .downPage .imp{ color:#c00; font-size:14px;  }
251 
252 /* 颜色代码 
253 #39A4DC 浅蓝色
254 
255 */
View Code

 

页面调用

<div id="slideBox" class="slideBox">
            <div class="hd">
                <ul><li class="">1</li><li class="on">2</li><li class="">3</li></ul>
            </div>
            <div class="bd">
                <ul>
                    <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg"></a></li>
                    <li style="display: list-item;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg"></a></li>
                    <li style="display: none;"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg"></a></li>
                </ul>
            </div>

            <!-- 下面是前/后按钮代码,如果不需要删除即可 -->
            <a class="prev" href="javascript:void(0)"></a>
            <a class="next" href="javascript:void(0)"></a>

        </div>
 1         /* css 重置 */
 2         *{margin:0; padding:0; list-style:none; }
 3         body{ background:#fff; font:normal 12px/22px 宋体;  }
 4         img{ border:0;  }
 5         a{ text-decoration:none; color:#333;  }
 6 
 7         /* 本例子css */
 8         .slideBox{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
 9         .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
10         .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
11         .slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
12         .slideBox .hd ul li.on{ background:#f00; color:#fff; }
13         .slideBox .bd{ position:relative; height:100%; z-index:0;   }
14         .slideBox .bd li{ zoom:1; vertical-align:middle; }
15         .slideBox .bd img{ width:450px; height:230px; display:block;  }
16 
17         /* 下面是前/后按钮代码,如果不需要删除即可 */
18         .slideBox .prev,
19         .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
20         .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
21         .slideBox .prev:hover,
22         .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
23         .slideBox .prevStop{ display:none;  }
24         .slideBox .nextStop{ display:none;  }
25 
26         
jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});

 

DEMO

技术分享
   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
   3 <meta property="wb:webmaster" content="125d4c886033b1d0" />
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   5 <meta http-equiv="Content-Language" content="zh-CN">
   6 <meta name="Keywords" content="SuperSlide,jQuery万能特效,jQuery幻灯片,jQuery焦点图,jQuery Tab切换,jQuery图片滚动,jQuery无缝滚动">
   7 <meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决!还可以多个SuperSlide组合创造更多效果">
   8 <title>SuperSlide - 基础效果</title>
   9 <script type="text/javascript" src="jquery1.42.min.js"></script>
  10 <link href="default.css" rel="stylesheet" type="text/css">
  11 </head>
  12 <body>
  13 <style type="text/css">
  14 #content{  padding:32px 0 30px 0;    }
  15 </style>
  16 <!-- header S -->
  17 <div id="header" name="header">
  18     <div class="headerBg"></div>
  19     <span class="nav">
  20         <a href="index.html">首页</a>|<a href="howToUse.html">如何使用</a>|<a href="param.html">查看参数</a>|<a href="demo.html">基础效果</a>|<a href="otherDemo.html">扩展效果</a>|<a href="downLoad.html">下载页面</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=1">常见问题</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=4">其它发明</a>|<a target="_blank" href="http://www.superslide2.com/blog/?page_id=12">交流反馈</a>
  21     </span>
  22     <div class="title">
  23             <h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.1</em><span class="author"> -- 大话主席</span>
  24     </div>
  25 </div>
  26 <!-- header E -->
  27 
  28 
  29 <!-- content S -->
  30 <div id="content" name="content">
  31 
  32     <!-- 1 switchTab S -->
  33     <div id="switchTab" class="demoBox">
  34         <div name="effect1" id="effect1" class="hd"><h3><span>1. </span>标签切换 / 书签切换 / 默认效果</h3></div>
  35         <div class="bd">
  36                 <div class="iframeWrap">
  37                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/1.0-switchTab-iframe.html?" frameborder="0"></iframe>
  38                     <p class="botTit"><em>1.0-标签切换</em></p>
  39                 </div>
  40 
  41                 <div class="params">
  42                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
  43                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
  44                             <tr>
  45                                 <td class="n">效果<i>[effect]</i>:</td>
  46                                 <td>
  47                                     <select rel="string" name="effect">
  48                                         <option value="fade">fade</option>
  49                                         <option value="fold">fold</option>
  50                                         <option value="left">left</option>
  51                                         <option value="top">top</option>
  52                                         <option value="leftLoop">leftLoop</option>
  53                                         <option value="topLoop">topLoop</option>
  54                                     </select>
  55                                 </td>
  56                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
  57                                 <td>
  58                                     <select name="autoPlay">
  59                                         <option value="false">false</option>
  60                                         <option value="true">true</option>
  61                                     </select>
  62                                 </td>
  63                             </tr>
  64                             <tr>
  65                                 <td class="n">触发方式<i>[trigger]</i>:</td>
  66                                 <td>
  67                                     <select rel="string" name="trigger">
  68                                         <option value="mouseover">mouseover</option>
  69                                         <option value="click">click</option>
  70                                     </select>
  71                                 </td>
  72                                 <td class="n">缓动效果<i>[easing]</i>:</td>
  73                                 <td>
  74                                     <select rel="string" name="easing">
  75                                         
  76                                         <option value="swing">swing</option>
  77                                         <option value="easeOutCirc">easeOutCirc</option>
  78                                         <option value="easeInQuint">easeInQuint</option>
  79                                         <option value="easeInBack">easeInBack</option>
  80                                         <option value="easeOutBounce">easeOutBounce</option>
  81                                         <option value="easeOutElastic">easeOutElastic</option>
  82                                         <option value="easing-more">更多</option>
  83                                     </select>
  84                                 </td>
  85                             </tr>
  86                             <tr>
  87                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
  88                                 <td>
  89                                     <select name="delayTime">
  90                                         <option value="500">500</option>
  91                                         <option value="700">700</option>
  92                                         <option value="1000">1000</option>
  93                                         <option value="0">0</option>
  94                                     </select>
  95                                 </td>
  96                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
  97                                 <td>
  98                                     <select name="pnLoop">
  99                                         <option value="true">true</option>
 100                                         <option value="false">false</option>
 101                                     </select>
 102                                 </td>
 103                             </tr>
 104                     </table>
 105                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".slideTxtBox").slide({<i></i>});</span></p>
 106                     <p class="notice">注意:缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”,会有最佳效果。<br/></p>
 107                 </div>
 108 
 109         </div><!-- bd E -->
 110     </div>
 111     <!-- 1 switchTab E -->
 112 
 113     <!-- 2 focusNews S -->
 114     <div id="focusNews" class="demoBox ">
 115         <div name="effect2" id="effect2" class="hd"><h3><span>2. </span>焦点图 / 幻灯片</h3></div>
 116         <div class="bd">
 117                 <div class="iframeWrap">
 118                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/2.0-focus-iframe.html?&fade&true" frameborder="0"></iframe>
 119                     <p class="botTit"><em>2.0-焦点图/幻灯片</em></p>
 120                 </div>
 121 
 122                 <div class="params">
 123                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 124                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 125                             <tr>
 126                                 <td class="n">效果<i>[effect]</i>:</td>
 127                                 <td>
 128                                     <select rel="string" name="effect">
 129                                         <option value="fade">fade</option>
 130                                         <option value="fold">fold</option>
 131                                         <option value="left">left</option>
 132                                         <option value="top">top</option>
 133                                         <option value="leftLoop">leftLoop</option>
 134                                         <option value="topLoop">topLoop</option>
 135                                     </select>
 136                                 </td>
 137                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
 138                                 <td>
 139                                     <select name="autoPlay">
 140                                         <option value="false">false</option>
 141                                         <option selected="selected" value="true">true</option>
 142                                     </select>
 143                                 </td>
 144                             </tr>
 145                             <tr>
 146                                 <td class="n">触发方式<i>[trigger]</i>:</td>
 147                                 <td>
 148                                     <select rel="string" name="trigger">
 149                                         <option value="mouseover">mouseover</option>
 150                                         <option value="click">click</option>
 151                                     </select>
 152                                 </td>
 153                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 154                                 <td>
 155                                     <select rel="string" name="easing">
 156                                         
 157                                         <option value="swing">swing</option>
 158                                         <option value="easeOutCirc">easeOutCirc</option>
 159                                         <option value="easeInQuint">easeInQuint</option>
 160                                         <option value="easeInBack">easeInBack</option>
 161                                         <option value="easeOutBounce">easeOutBounce</option>
 162                                         <option value="easeOutElastic">easeOutElastic</option>
 163                                         <option value="easing-more">更多</option>
 164                                     </select>
 165                                 </td>
 166                             </tr>
 167                             <tr>
 168                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 169                                 <td>
 170                                     <select name="delayTime">
 171                                         <option value="500">500</option>
 172                                         <option value="700">700</option>
 173                                         <option value="1000">1000</option>
 174                                         <option value="0">0</option>
 175                                     </select>
 176                                 </td>
 177                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 178                                 <td>
 179                                     <select name="mouseOverStop">
 180                                         <option value="true">true</option>
 181                                         <option value="false">false</option>
 182                                     </select>
 183                                 </td>
 184                             </tr>
 185                             <tr>
 186                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 187                                 <td>
 188                                     <select name="pnLoop">
 189                                         <option value="true">true</option>
 190                                         <option value="false">false</option>
 191                                     </select>
 192                                 </td>
 193                             </tr>
 194                     </table>
 195                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".slideBox").slide({mainCell:".bd ul"<i></i>});</span></p>
 196                     <p class="notice">注意:缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”,会有最佳效果。<br/></p>
 197                 </div>
 198 
 199         </div><!-- bd E -->
 200     </div>
 201     <!-- 2 focusNews E -->
 202 
 203     <!-- 3 picScroll-left S -->
 204     <div id="picScroll-left" class="demoBox ">
 205         <div name="effect3" id="effect3" class="hd"><h3><span>3. </span>图片滚动-左</h3></div>
 206         <div class="bd">
 207                 <div class="iframeWrap">
 208                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/3.0-picScroll-left-iframe.html?&left&true&1&3" frameborder="0"></iframe>
 209                     <p class="botTit"><em>3.0-图片滚动-左</em></p>
 210                 </div>
 211 
 212                 <div class="params">
 213                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 214                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 215                             <tr>
 216                                 <td class="n">效果<i>[effect]</i>:</td>
 217                                 <td>
 218                                     <select rel="string" name="effect">
 219                                         <option value="left" class="show">left</option>
 220                                         <option value="leftLoop">leftLoop</option>
 221                                     </select>
 222                                 </td>
 223                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
 224                                 <td>
 225                                     <select name="autoPlay">
 226                                         <option value="false">false</option>
 227                                         <option selected="selected" value="true">true</option>
 228                                     </select>
 229                                 </td>
 230                             </tr>
 231                             <tr>
 232                                 <td class="n">滚动个数<i>[scroll]</i>:</td>
 233                                 <td>
 234                                     <select name="scroll">
 235                                         <option value="1">1</option>
 236                                         <option value="2">2</option>
 237                                         <option value="3">3</option>
 238                                     </select>
 239                                 </td>
 240                                 <td class="n">可视个数<i>[vis]</i>:</td>
 241                                 <td>
 242                                     <select name="vis">
 243                                         <option value="1">1</option>
 244                                         <option value="2">2</option>
 245                                         <option value="3" selected="selected">3</option>
 246                                     </select>
 247                                 </td>
 248                             </tr>
 249                             <tr>
 250                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 251                                 <td>
 252                                     <select rel="string" name="easing">
 253                                         
 254                                         <option value="swing">swing</option>
 255                                         <option value="easeOutCirc">easeOutCirc</option>
 256                                         <option value="easeInQuint">easeInQuint</option>
 257                                         <option value="easeInBack">easeInBack</option>
 258                                         <option value="easeOutBounce">easeOutBounce</option>
 259                                         <option value="easeOutElastic">easeOutElastic</option>
 260                                         <option value="easing-more">更多</option>
 261                                     </select>
 262                                 </td>
 263                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 264                                 <td>
 265                                     <select name="delayTime">
 266                                         <option value="500">500</option>
 267                                         <option value="700">700</option>
 268                                         <option value="1000">1000</option>
 269                                         <option value="0">0</option>
 270                                     </select>
 271                                 </td>
 272                             </tr>
 273                             <tr>
 274                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 275                                 <td>
 276                                     <select name="pnLoop">
 277                                         <option value="true">true</option>
 278                                         <option value="false">false</option>
 279                                     </select>
 280                                 </td>
 281                                 <td class="n">触发方式<i>[trigger]</i>:</td>
 282                                 <td>
 283                                     <select rel="string" name="trigger">
 284                                         <option value="mouseover">mouseover</option>
 285                                         <option value="click">click</option>
 286                                     </select>
 287                                 </td>
 288                             </tr>
 289                             <tr>
 290                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 291                                 <td>
 292                                     <select name="mouseOverStop">
 293                                         <option value="true">true</option>
 294                                         <option value="false">false</option>
 295                                     </select>
 296                                 </td>
 297                             </tr>
 298                     </table>
 299                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
 300                     <p class="notice">注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。<br/>
 301                         注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。
 302                     </p>
 303                 </div>
 304 
 305         </div><!-- bd E -->
 306     </div>
 307     <!-- 3 picScroll-left E -->
 308 
 309     <!-- 4 picScroll-top S -->
 310     <div id="picScroll-top" class="demoBox ">
 311         <div name="effect4" id="effect4" class="hd"><h3><span>4. </span>图片滚动-上</h3></div>
 312         <div class="bd">
 313                 <div class="iframeWrap">
 314                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/4.0-picScroll-top-iframe.html?&top&true&1&3" frameborder="0"></iframe>
 315                     <p class="botTit"><em>4.0-图片滚动-上</em></p>
 316                 </div>
 317 
 318                 <div class="params">
 319                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 320                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 321                             <tr>
 322                                 <td class="n">效果<i>[effect]</i>:</td>
 323                                 <td>
 324                                     <select  rel="string" name="effect">
 325                                         <option value="top" class="show">top</option>
 326                                         <option value="topLoop">topLoop</option>
 327                                     </select>
 328                                 </td>
 329                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
 330                                 <td>
 331                                     <select name="autoPlay">
 332                                         <option value="false">false</option>
 333                                         <option selected="selected" value="true">true</option>
 334                                     </select>
 335                                 </td>
 336                             </tr>
 337                             <tr>
 338                                 <td class="n">滚动个数<i>[scroll]</i>:</td>
 339                                 <td>
 340                                     <select name="scroll">
 341                                         <option value="1">1</option>
 342                                         <option value="2">2</option>
 343                                         <option value="3">3</option>
 344                                     </select>
 345                                 </td>
 346                                 <td class="n">可视个数<i>[vis]</i>:</td>
 347                                 <td>
 348                                     <select name="vis">
 349                                         <option value="1">1</option>
 350                                         <option value="2">2</option>
 351                                         <option value="3" selected="selected">3</option>
 352                                     </select>
 353                                 </td>
 354                             </tr>
 355                             <tr>
 356                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 357                                 <td>
 358                                     <select rel="string" name="easing">
 359                                         
 360                                         <option value="swing">swing</option>
 361                                         <option value="easeOutCirc">easeOutCirc</option>
 362                                         <option value="easeInQuint">easeInQuint</option>
 363                                         <option value="easeInBack">easeInBack</option>
 364                                         <option value="easeOutBounce">easeOutBounce</option>
 365                                         <option value="easeOutElastic">easeOutElastic</option>
 366                                         <option value="easing-more">更多</option>
 367                                     </select>
 368                                 </td>
 369                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 370                                 <td>
 371                                     <select name="delayTime">
 372                                         <option value="500">500</option>
 373                                         <option value="700">700</option>
 374                                         <option value="1000">1000</option>
 375                                         <option value="0">0</option>
 376                                     </select>
 377                                 </td>
 378                             </tr>
 379                             <tr>
 380                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 381                                 <td>
 382                                     <select name="pnLoop">
 383                                         <option value="true">true</option>
 384                                         <option value="false">false</option>
 385                                     </select>
 386                                 </td>
 387                                 <td class="n">触发方式<i>[trigger]</i>:</td>
 388                                 <td>
 389                                     <select rel="string" name="trigger">
 390                                         <option value="mouseover">mouseover</option>
 391                                         <option value="click">click</option>
 392                                     </select>
 393                                 </td>
 394                             </tr>
 395                             <tr>
 396                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 397                                 <td>
 398                                     <select name="mouseOverStop">
 399                                         <option value="true">true</option>
 400                                         <option value="false">false</option>
 401                                     </select>
 402                                 </td>
 403                             </tr>
 404                     </table>
 405                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
 406                     <p class="notice">注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。<br/>
 407                         注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。
 408                     </p>
 409                 </div>
 410 
 411         </div><!-- bd E -->
 412     </div>
 413     <!-- 4 picScroll-top E -->
 414 
 415     <!-- 5 picMarquee-left S -->
 416     <div id="picMarquee-left" class="demoBox ">
 417         <div name="effect5" id="effect5" class="hd"><h3><span>5. </span>图片无缝滚动-左</h3></div>
 418         <div class="bd">
 419                 <div class="iframeWrap">
 420                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/5.0-picMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
 421                     <p class="botTit"><em>5.0-图片无缝滚动-左</em></p>
 422                 </div>
 423 
 424                 <div class="params">
 425                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 426                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 427                             <tr>
 428                                 <td class="n">效果<i>[effect]</i>:</td>
 429                                 <td>
 430                                     <select rel="string" name="effect">
 431                                         <option value="leftMarquee" class="show">leftMarquee</option>
 432                                     </select>
 433                                 </td>
 434                                 <td class="n">可视个数<i>[vis]</i>:</td>
 435                                 <td>
 436                                     <select name="vis">
 437                                         <option value="1">1</option>
 438                                         <option value="2">2</option>
 439                                         <option value="3" selected="selected">3</option>
 440                                     </select>
 441                                 </td>
 442                             </tr>
 443                             <tr>
 444                                 <td class="n">运行速度<i>[interTime]</i>:</td>
 445                                 <td>
 446                                     <select name="interTime">
 447                                         <option value="50" class="show">50</option>
 448                                         <option value="25">25</option>
 449                                         <option value="10">10</option>
 450                                     </select>
 451                                 </td>
 452                                 <td class="n">默认反方向运动<i>[opp]</i>:</td>
 453                                 <td>
 454                                     <select name="opp">
 455                                         <option value="false">false</option>
 456                                         <option value="true">true</option>
 457                                     </select>
 458                                 </td>
 459                             </tr>
 460                             <tr>
 461                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 462                                 <td>
 463                                     <select name="pnLoop">
 464                                         <option value="true">true</option>
 465                                         <option value="false">false</option>
 466                                     </select>
 467                                 </td>
 468                                 <td class="n new" title="v2.1 新增:长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
 469                                 <td>
 470                                     <select rel="string" name="trigger">
 471                                         <option value="mouseover">mouseover</option>
 472                                         <option value="click" selected="selected">click</option>
 473                                     </select>
 474                                 </td>
 475                             </tr>
 476                             <tr>
 477                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 478                                 <td>
 479                                     <select name="mouseOverStop">
 480                                         <option value="true">true</option>
 481                                         <option value="false">false</option>
 482                                     </select>
 483                                 </td>
 484                             </tr>
 485                     </table>
 486                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
 487                 </div>
 488 
 489         </div><!-- bd E -->
 490     </div>
 491     <!-- 5 picMarquee-left E -->
 492 
 493     <!-- 6 picMarquee-top S -->
 494     <div id="picMarquee-top" class="demoBox ">
 495         <div name="effect6" id="effect6" class="hd"><h3><span>6. </span>图片无缝滚动-上</h3></div>
 496         <div class="bd">
 497                 <div class="iframeWrap">
 498                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/6.0-picMarquee-top-iframe.html?&topMarquee&3&50&false&true&click" frameborder="0"></iframe>
 499                     <p class="botTit"><em>6.0-图片无缝滚动-上</em></p>
 500                 </div>
 501 
 502                 <div class="params">
 503                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 504                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 505                             <tr>
 506                                 <td class="n">效果<i>[effect]</i>:</td>
 507                                 <td>
 508                                     <select rel="string" name="effect">
 509                                         <option value="topMarquee" class="show">topMarquee</option>
 510                                     </select>
 511                                 </td>
 512                                 <td class="n">可视个数<i>[vis]</i>:</td>
 513                                 <td>
 514                                     <select name="vis">
 515                                         <option value="1">1</option>
 516                                         <option value="2">2</option>
 517                                         <option value="3" selected="selected">3</option>
 518                                     </select>
 519                                 </td>
 520                             </tr>
 521                             <tr>
 522                                 <td class="n">运行速度<i>[interTime]</i>:</td>
 523                                 <td>
 524                                     <select name="interTime">
 525                                         <option value="50" class="show">50</option>
 526                                         <option value="25">25</option>
 527                                         <option value="10">10</option>
 528                                     </select>
 529                                 </td>
 530                                 <td class="n">默认反方向运动<i>[opp]</i>:</td>
 531                                 <td>
 532                                     <select name="opp">
 533                                         <option value="false">false</option>
 534                                         <option value="true">true</option>
 535                                     </select>
 536                                 </td>
 537                             </tr>
 538                             <tr>
 539                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 540                                 <td>
 541                                     <select name="pnLoop">
 542                                         <option value="true">true</option>
 543                                         <option value="false">false</option>
 544                                     </select>
 545                                 </td>
 546                                 <td class="n new" title="v2.1 新增:长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
 547                                 <td>
 548                                     <select rel="string" name="trigger">
 549                                         <option value="mouseover">mouseover</option>
 550                                         <option value="click" selected="selected">click</option>
 551                                     </select>
 552                                 </td>
 553                             </tr>
 554                             <tr>
 555                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 556                                 <td>
 557                                     <select name="mouseOverStop">
 558                                         <option value="true">true</option>
 559                                         <option value="false">false</option>
 560                                     </select>
 561                                 </td>
 562                             </tr>
 563 
 564                     </table>
 565                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
 566                 </div>
 567 
 568         </div><!-- bd E -->
 569     </div>
 570     <!-- 6 picMarquee-top E -->
 571 
 572     <!-- 7 txtScroll-left S -->
 573     <div id="txtScroll-left" class="demoBox ">
 574         <div name="effect7" id="effect7" class="hd"><h3><span>7. </span>文字滚动-左</h3></div>
 575         <div class="bd">
 576                 <div class="iframeWrap">
 577                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/7.0-txtScroll-left-iframe.html?&left&true&2&2" frameborder="0"></iframe>
 578                     <p class="botTit"><em>7.0-文字滚动-左</em></p>
 579                 </div>
 580 
 581                 <div class="params">
 582                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 583                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 584                             <tr>
 585                                 <td class="n">效果<i>[effect]</i>:</td>
 586                                 <td>
 587                                     <select rel="string" name="effect">
 588                                         <option value="left" class="show">left</option>
 589                                         <option value="leftLoop">leftLoop</option>
 590                                     </select>
 591                                 </td>
 592                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
 593                                 <td>
 594                                     <select name="autoPlay">
 595                                         <option value="false">false</option>
 596                                         <option selected="selected" value="true">true</option>
 597                                     </select>
 598                                 </td>
 599                             </tr>
 600                             <tr>
 601                                 <td class="n">滚动个数<i>[scroll]</i>:</td>
 602                                 <td>
 603                                     <select name="scroll">
 604                                         <option value="1">1</option>
 605                                         <option value="2" selected="selected">2</option>
 606                                     </select>
 607                                 </td>
 608                                 <td class="n">可视个数<i>[vis]</i>:</td>
 609                                 <td>
 610                                     <select name="vis">
 611                                         <option value="1">1</option>
 612                                         <option value="2" selected="selected">2</option>
 613                                     </select>
 614                                 </td>
 615                             </tr>
 616                             <tr>
 617                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 618                                 <td>
 619                                     <select rel="string" name="easing">
 620                                         
 621                                         <option value="swing">swing</option>
 622                                         <option value="easeOutCirc">easeOutCirc</option>
 623                                         <option value="easeInQuint">easeInQuint</option>
 624                                         <option value="easeInBack">easeInBack</option>
 625                                         <option value="easeOutBounce">easeOutBounce</option>
 626                                         <option value="easeOutElastic">easeOutElastic</option>
 627                                         <option value="easing-more">更多</option>
 628                                     </select>
 629                                 </td>
 630                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 631                                 <td>
 632                                     <select name="delayTime">
 633                                         <option value="500">500</option>
 634                                         <option value="700">700</option>
 635                                         <option value="1000">1000</option>
 636                                         <option value="0">0</option>
 637                                     </select>
 638                                 </td>
 639                             </tr>
 640                             <tr>
 641                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 642                                 <td>
 643                                     <select name="pnLoop">
 644                                         <option value="true">true</option>
 645                                         <option value="false">false</option>
 646                                     </select>
 647                                 </td>
 648                                 <td class="n">触发方式<i>[trigger]</i>:</td>
 649                                 <td>
 650                                     <select rel="string" name="trigger">
 651                                         <option value="mouseover">mouseover</option>
 652                                         <option value="click">click</option>
 653                                     </select>
 654                                 </td>
 655                             </tr>
 656                             <tr>
 657                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 658                                 <td>
 659                                     <select name="mouseOverStop">
 660                                         <option value="true">true</option>
 661                                         <option value="false">false</option>
 662                                     </select>
 663                                 </td>
 664                             </tr>
 665                     </table>
 666                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
 667                     <p class="notice">注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。<br/>
 668                         注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。
 669                     </p>
 670                 </div>
 671 
 672         </div><!-- bd E -->
 673     </div>
 674     <!-- 7 txtScroll-left E -->
 675 
 676     <!-- 8 txtScroll-top S -->
 677     <div id="txtScroll-top" class="demoBox ">
 678         <div name="effect8" id="effect8" class="hd"><h3><span>8. </span>文字滚动-上</h3></div>
 679         <div class="bd">
 680                 <div class="iframeWrap">
 681                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/8.0-txtScroll-top-iframe.html?&top&true&1&5" frameborder="0"></iframe>
 682                     <p class="botTit"><em>8.0-文字滚动-上</em></p>
 683                 </div>
 684 
 685                 <div class="params">
 686                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 687                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 688                             <tr>
 689                                 <td class="n">效果<i>[effect]</i>:</td>
 690                                 <td>
 691                                     <select  rel="string" name="effect">
 692                                         <option value="top" class="show">top</option>
 693                                         <option value="topLoop">topLoop</option>
 694                                     </select>
 695                                 </td>
 696                                 <td class="n">自动运行<i>[autoPlay]</i>:</td>
 697                                 <td>
 698                                     <select name="autoPlay">
 699                                         <option value="false">false</option>
 700                                         <option selected="selected" value="true">true</option>
 701                                     </select>
 702                                 </td>
 703                             </tr>
 704                             <tr>
 705                                 <td class="n">滚动个数<i>[scroll]</i>:</td>
 706                                 <td>
 707                                     <select name="scroll">
 708                                         <option value="1">1</option>
 709                                         <option value="2">2</option>
 710                                         <option value="3">3</option>
 711                                         <option value="4">4</option>
 712                                         <option value="5">5</option>
 713                                     </select>
 714                                 </td>
 715                                 <td class="n">可视个数<i>[vis]</i>:</td>
 716                                 <td>
 717                                     <select name="vis">
 718                                         <option value="1">1</option>
 719                                         <option value="2">2</option>
 720                                         <option value="3">3</option>
 721                                         <option value="4">4</option>
 722                                         <option value="5" selected="selected">5</option>
 723                                     </select>
 724                                 </td>
 725                             </tr>
 726                             <tr>
 727                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 728                                 <td>
 729                                     <select rel="string" name="easing">
 730                                         
 731                                         <option value="swing">swing</option>
 732                                         <option value="easeOutCirc">easeOutCirc</option>
 733                                         <option value="easeInQuint">easeInQuint</option>
 734                                         <option value="easeInBack">easeInBack</option>
 735                                         <option value="easeOutBounce">easeOutBounce</option>
 736                                         <option value="easeOutElastic">easeOutElastic</option>
 737                                         <option value="easing-more">更多</option>
 738                                     </select>
 739                                 </td>
 740                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 741                                 <td>
 742                                     <select name="delayTime">
 743                                         <option value="500">500</option>
 744                                         <option value="700">700</option>
 745                                         <option value="1000">1000</option>
 746                                         <option value="0">0</option>
 747                                     </select>
 748                                 </td>
 749                             </tr>
 750                             <tr>
 751                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 752                                 <td>
 753                                     <select name="pnLoop">
 754                                         <option value="true">true</option>
 755                                         <option value="false">false</option>
 756                                     </select>
 757                                 </td>
 758                                 <td class="n">触发方式<i>[trigger]</i>:</td>
 759                                 <td>
 760                                     <select rel="string" name="trigger">
 761                                         <option value="mouseover">mouseover</option>
 762                                         <option value="click">click</option>
 763                                     </select>
 764                                 </td>
 765                             </tr>
 766                             <tr>
 767                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 768                                 <td>
 769                                     <select name="mouseOverStop">
 770                                         <option value="true">true</option>
 771                                         <option value="false">false</option>
 772                                     </select>
 773                                 </td>
 774                             </tr>
 775                     </table>
 776                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
 777                     <p class="notice">注意1:不同缓动效果设置适当“效果速度”,会有最佳效果。<br/>
 778                         注意2:现在是全按钮开启情况,不需要按钮的时候,只要删除按钮html或者隐藏即可。
 779                     </p>
 780                 </div>
 781 
 782         </div><!-- bd E -->
 783     </div>
 784     <!-- 8 txtScroll-top E -->
 785 
 786     <!-- 9 txtMarquee-left S -->
 787     <div id="txtMarquee-left" class="demoBox ">
 788         <div name="effect9" id="effect9" class="hd"><h3><span>9. </span>文字无缝滚动-左</h3></div>
 789         <div class="bd">
 790                 <div class="iframeWrap">
 791                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/9.0-txtMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
 792                     <p class="botTit"><em>9.0-文字无缝滚动-左</em></p>
 793                 </div>
 794 
 795                 <div class="params">
 796                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 797                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 798                             <tr>
 799                                 <td class="n">效果<i>[effect]</i>:</td>
 800                                 <td>
 801                                     <select rel="string" name="effect">
 802                                         <option value="leftMarquee" class="show">leftMarquee</option>
 803                                     </select>
 804                                 </td>
 805                                 <td class="n">可视个数<i>[vis]</i>:</td>
 806                                 <td>
 807                                     <select name="vis">
 808                                         <option value="2" selected="selected">2</option>
 809                                     </select>
 810                                 </td>
 811                             </tr>
 812                             <tr>
 813                                 <td class="n">运行速度<i>[interTime]</i>:</td>
 814                                 <td>
 815                                     <select name="interTime">
 816                                         <option value="50" class="show">50</option>
 817                                         <option value="25">25</option>
 818                                         <option value="10">10</option>
 819                                     </select>
 820                                 </td>
 821                                 <td class="n">默认反方向运动<i>[opp]</i>:</td>
 822                                 <td>
 823                                     <select name="opp">
 824                                         <option value="false">false</option>
 825                                         <option value="true">true</option>
 826                                     </select>
 827                                 </td>
 828                             </tr>
 829                             <tr>
 830                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 831                                 <td>
 832                                     <select name="pnLoop">
 833                                         <option value="true">true</option>
 834                                         <option value="false">false</option>
 835                                     </select>
 836                                 </td>
 837                                 <td class="n new" title="v2.1 新增:长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
 838                                 <td>
 839                                     <select rel="string" name="trigger">
 840                                         <option value="mouseover">mouseover</option>
 841                                         <option value="click" selected="selected">click</option>
 842                                     </select>
 843                                 </td>
 844                             </tr>
 845                             <tr>
 846                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 847                                 <td>
 848                                     <select name="mouseOverStop">
 849                                         <option value="true">true</option>
 850                                         <option value="false">false</option>
 851                                     </select>
 852                                 </td>
 853                             </tr>
 854                     </table>
 855                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
 856                 </div>
 857 
 858         </div><!-- bd E -->
 859     </div>
 860     <!-- 9 txtMarquee-left E -->
 861 
 862     <!-- 10 txtMarquee-top S -->
 863     <div id="txtMarquee-top" class="demoBox ">
 864         <div name="effect10" id="effect10" class="hd"><h3><span>10. </span>文字无缝滚动-上</h3></div>
 865         <div class="bd">
 866                 <div class="iframeWrap">
 867                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/10.0-txtMarquee-top-iframe.html?&topMarquee&5&50&false&true&click" frameborder="0"></iframe>
 868                     <p class="botTit"><em>10.0-文字无缝滚动-上</em></p>
 869                 </div>
 870 
 871                 <div class="params">
 872                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 873                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 874                             <tr>
 875                                 <td class="n">效果<i>[effect]</i>:</td>
 876                                 <td>
 877                                     <select rel="string" name="effect">
 878                                         <option value="topMarquee" class="show">topMarquee</option>
 879                                     </select>
 880                                 </td>
 881                                 <td class="n">可视个数<i>[vis]</i>:</td>
 882                                 <td>
 883                                     <select name="vis">
 884                                         <option value="1">1</option>
 885                                         <option value="2">2</option>
 886                                         <option value="3">3</option>
 887                                         <option value="4">4</option>
 888                                         <option value="5" selected="selected">5</option>
 889                                     </select>
 890                                 </td>
 891                             </tr>
 892                             <tr>
 893                                 <td class="n">运行速度<i>[interTime]</i>:</td>
 894                                 <td>
 895                                     <select name="interTime">
 896                                         <option value="50" class="show">50</option>
 897                                         <option value="25">25</option>
 898                                         <option value="10">10</option>
 899                                     </select>
 900                                 </td>
 901                                 <td class="n">默认反方向运动<i>[opp]</i>:</td>
 902                                 <td>
 903                                     <select name="opp">
 904                                         <option value="false">false</option>
 905                                         <option value="true">true</option>
 906                                     </select>
 907                                 </td>
 908                             </tr>
 909                             <tr>
 910                                 <td class="n" title="前/后按钮是否继续循环,若为false则当翻动到最前/后页时,前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
 911                                 <td>
 912                                     <select name="pnLoop">
 913                                         <option value="true">true</option>
 914                                         <option value="false">false</option>
 915                                     </select>
 916                                 </td>
 917                                 <td class="n new" title="v2.1 新增:长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
 918                                 <td>
 919                                     <select rel="string" name="trigger">
 920                                         <option value="mouseover">mouseover</option>
 921                                         <option value="click" selected="selected">click</option>
 922                                     </select>
 923                                 </td>
 924                             </tr>
 925                             <tr>
 926                                 <td class="n new" title="v2.1 新增:鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
 927                                 <td>
 928                                     <select name="mouseOverStop">
 929                                         <option value="true">true</option>
 930                                         <option value="false">false</option>
 931                                     </select>
 932                                 </td>
 933                             </tr>
 934                     </table>
 935                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
 936                 </div>
 937 
 938         </div><!-- bd E -->
 939     </div>
 940     <!-- 10 txtMarquee-top E -->
 941 
 942 
 943     <!-- 11 nav S -->
 944     <div id="topNav" class="demoBox ">
 945         <div name="effect11" id="effect11" class="hd"><h3><span>11. </span>导航</h3></div>
 946         <div class="bd">
 947                 <div class="iframeWrap">
 948                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/11.0-nav-iframe.html?&slideDown&300&0&true&true&" frameborder="0"></iframe>
 949                     <p class="botTit"><em>12.0-导航</em></p>
 950                 </div>
 951 
 952                 <div class="params">
 953                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
 954                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
 955                             <tr>
 956                                 <td class="n">效果<i>[effect]</i>:</td>
 957                                 <td>
 958                                     <select rel="string" name="effect">
 959                                         <option value="fade">fade</option>
 960                                         <option value="slideDown" selected="selected">slideDown</option>
 961                                     </select>
 962                                 </td>
 963                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
 964                                 <td>
 965                                     <select name="delayTime">
 966                                         <option value="500">500</option>
 967                                         <option value="300" selected="selected">300</option>
 968                                         <option value="100">100</option>
 969                                         <option value="0">0</option>
 970                                     </select>
 971                                 </td>
 972                             </tr>
 973                             <tr>
 974                                 <td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
 975                                 <td>
 976                                     <select name="triggerTime">
 977                                         <option value="150">150</option>
 978                                         <option value="300">300</option>
 979                                         <option value="0" selected="selected">0</option>
 980                                     </select>
 981                                 </td>
 982                                 <td class="n new"  title="v2.1 新增:默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
 983                                 <td>
 984                                     <select name="defaultPlay">
 985                                         <option value="true">true</option>
 986                                         <option value="false">false</option>
 987                                     </select>
 988                                 </td>
 989                             </tr>
 990                             <tr>
 991                                 <td class="n new" title="v2.1 新增:鼠标移走,0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
 992                                 <td>
 993                                     <select name="returnDefault">
 994                                         <option value="false">false</option>
 995                                         <option value="true" selected="selected">true</option>
 996                                     </select>
 997                                 </td>
 998                                 <td class="n">缓动效果<i>[easing]</i>:</td>
 999                                 <td>
1000                                     <select rel="string" name="easing">
1001                                         <option value="swing">swing</option>
1002                                         <option value="easeOutCirc">easeOutCirc</option>
1003                                         <option value="easeInQuint">easeInQuint</option>
1004                                         <option value="easeInBack">easeInBack</option>
1005                                         <option value="easeOutBounce">easeOutBounce</option>
1006                                         <option value="easeOutElastic">easeOutElastic</option>
1007                                         <option value="easing-more">更多</option>
1008                                     </select>
1009                                 </td>
1010                             </tr>
1011 
1012 
1013                     </table>
1014                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"<i></i>});</span></p>
1015                 </div>
1016 
1017         </div><!-- bd E -->
1018     </div>
1019     <!-- 11 nav E -->
1020 
1021 
1022     <!-- 12 sideMenu S -->
1023     <div id="sideMenu" class="demoBox ">
1024         <div name="effect12" id="effect12" class="hd"><h3><span>12. </span>手风琴</h3></div>
1025         <div class="bd">
1026                 <div class="iframeWrap">
1027                     <iframe allowTransparency="true" scrolling="no" _src="demo/iframe/12.0-sideMenu-iframe.html?&slideDown&300&mouseover&150&true&true&" frameborder="0"></iframe>
1028                     <p class="botTit"><em>13.0-手风琴</em></p>
1029                 </div>
1030 
1031                 <div class="params">
1032                     <table width="100%" border="0" cellspacing="0" cellpadding="0">
1033                             <tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
1034                             <tr>
1035                                 <td class="n">效果<i>[effect]</i>:</td>
1036                                 <td>
1037                                     <select rel="string" name="effect">
1038                                         <option value="fade">fade</option>
1039                                         <option value="slideDown" selected="selected">slideDown</option>
1040                                     </select>
1041                                 </td>
1042                                 <td class="n">效果速度<i>[delayTime]</i>:</td>
1043                                 <td>
1044                                     <select name="delayTime">
1045                                         <option value="500">500</option>
1046                                         <option value="300" selected="selected">300</option>
1047                                         <option value="100">100</option>
1048                                         <option value="0">0</option>
1049                                     </select>
1050                                 </td>
1051                             </tr>
1052                             <tr>
1053                                 <td class="n">触发方式<i>[trigger]</i>:</td>
1054                                 <td>
1055                                     <select rel="string" name="trigger">
1056                                         <option value="mouseover">mouseover</option>
1057                                         <option value="click">click</option>
1058                                     </select>
1059                                 </td>
1060                                 <td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
1061                                 <td>
1062                                     <select name="triggerTime">
1063                                         <option value="150">150</option>
1064                                         <option value="300">300</option>
1065                                         <option value="0">0</option>
1066                                     </select>
1067                                 </td>
1068                             </tr>
1069                             <tr>
1070                                 <td class="n new"  title="v2.1 新增:默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
1071                                 <td>
1072                                     <select name="defaultPlay">
1073                                         <option value="true">true</option>
1074                                         <option value="false">false</option>
1075                                     </select>
1076                                 </td>
1077                                 <td class="n new" title="v2.1 新增:鼠标移走,0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
1078                                 <td>
1079                                     <select name="returnDefault">
1080                                         <option value="false">false</option>
1081                                         <option value="true" selected="selected">true</option>
1082                                     </select>
1083                                 </td>
1084                             </tr>
1085                             <tr>
1086                                  <td class="n">缓动效果<i>[easing]</i>:</td>
1087                                 <td>
1088                                     <select rel="string" name="easing">
1089                                         <option value="swing">swing</option>
1090                                         <option value="easeOutCirc">easeOutCirc</option>
1091                                         <option value="easeInQuint">easeInQuint</option>
1092                                         <option value="easeInBack">easeInBack</option>
1093                                         <option value="easeOutBounce">easeOutBounce</option>
1094                                         <option value="easeOutElastic">easeOutElastic</option>
1095                                         <option value="easing-more">更多</option>
1096                                     </select>
1097                                 </td>
1098                             </tr>
1099 
1100 
1101                     </table>
1102                     <p class="jsCode">当前调用代码:<span class="curJsCode">jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1<i></i>});</span></p>
1103                 </div>
1104 
1105         </div><!-- bd E -->
1106     </div>
1107     <!-- 12 sideMenu E -->
1108 
1109     <!-- T1 others S -->
1110     <div id="others" class="demoBox">
1111         <div name="effectT1" id="effectT1" class="hd"><h3><span>T1. </span>其它基础效果</h3></div>
1112         <div class="bd">
1113 
1114             <ul class="demoList">
1115                 <li>
1116                         <div class="pic">
1117                             <img src="demo/T1.1-multipleLine.jpg" />
1118                         </div>
1119                         <h3>多行滚动基础示例</h3>
1120                 </li>
1121                 <li>
1122                         <div class="pic">
1123                             <img src="demo/T1.2-multipleColumn.jpg" />
1124                         </div>
1125                         <h3>多列滚动基础示例</h3>
1126                 </li>
1127                 <li>
1128                         <div class="pic">
1129                             <img src="demo/T1.3-targetCell.jpg" />
1130                         </div>
1131                         <h3>targetCell基础示例</h3>
1132                 </li>
1133                 <li>
1134                         <div class="pic">
1135                             <img src="demo/T1.4-SuperSlideGroup.jpg" />
1136                         </div>
1137                         <h3>SuperSlide组合应用基础示例</h3>
1138                 </li>
1139                 <li class="o">
1140                         <div class="pic">
1141                             <a href="demo/T1.5-onePage.html" target="_blank"><img src="demo/T1.5-onePage.jpg" /></a>
1142                         </div>
1143                         <h3>同一页面使用多个效果示例</h3>
1144                 </li>
1145                 <li class="new">
1146                         <div class="pic">
1147                             <img src="demo/T1.6-doubleTab.jpg" />
1148                         </div>
1149                         <h3>双重Tab(slide组合)</h3>
1150                         <i></i>
1151                 </li>
1152                 <li class="new">
1153                         <div class="pic">
1154                             <img src="demo/T1.7-tabMarquee.jpg" />
1155                         </div>
1156                         <h3>Tab+无缝滚动(slide组合)</h3>
1157                         <i></i>
1158                 </li>
1159                 <li class="new">
1160                         <div class="pic">
1161                             <img src="demo/T1.8-picFocus.jpg" />
1162                         </div>
1163                         <h3>图片导航焦点图</h3>
1164                         <i></i>
1165                 </li>
1166             </ul>
1167 
1168         </div><!-- bd E -->
1169     </div>
1170     <!-- T1 others E -->
1171 
1172     <script type="text/javascript">
1173         //隔行添加demoBoxEven
1174         $(".demoBox").each(function(i){ if (i%2==0)$(this).addClass("demoBoxEven"); });
1175         //当前调用代码初始化
1176         $(".params").each(function(ind){
1177             $(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
1178         });
1179 
1180         //切换参数调用切换不同效果
1181         $(".params select").change(function(){
1182 
1183              if($(this).val()=="easing-more"){ window.open("otherDemo/T2.1/easing.html"); return; }
1184 
1185              var srcStr="";
1186              var ind=$(".params").index( $(this).closest(".params") );
1187 
1188              var iframe = $(this).closest(".demoBox").find("iframe");
1189              var selects = $(this).closest(".params").find("select");
1190 
1191              selects.each(function(){
1192                 srcStr += "&"+$(this).val();
1193              });
1194              iframe.attr("src",iframe.attr("src").split(&)[0]+srcStr);
1195 
1196             $(".curJsCode").eq(ind).html(getJsCode(ind));
1197         });
1198 
1199         //当前调用代码
1200         function getJsCode( ind ){
1201             var curJsCode="";
1202             var $cur = $(".curJsCode").eq(ind);
1203 
1204             $(".params").eq(ind).find("select").each(function(){
1205                 if( $("option",this).index( $("option:selected",this) ) !=0 || $("option",this).attr("class")=="show")
1206                 {
1207                     var tempVal = $(this).attr("rel")=="string"?("+$(this).val()+"):$(this).val();
1208                     curJsCode+= "," + $(this).attr("name")+":"+tempVal;
1209                 }
1210             });
1211             if(ind==0) curJsCode = curJsCode.substring(1);
1212             $cur.find("i").html(curJsCode);
1213             curJsCode = $cur.html();
1214             return curJsCode;
1215         }
1216 
1217 
1218     </script>
1219 
1220 
1221 </div>
1222 <!-- content E -->
1223 
1224     <!-- 隐藏代码盒子 S -->
1225     <div id="displayBox">
1226         <div class="hd"><a>X</a><h3></h3></div>
1227         <div class="bd">
1228             <iframe allowTransparency="true" scrolling="yse" src="" frameborder="0"></iframe>
1229         </div>
1230     </div>
1231     <script type="text/javascript">
1232 
1233             $(".demoList li").hover(function(){ $(this).addClass("on") },function(){ $(this).removeClass("on") });
1234             $(".demoList li").each(function(i){
1235                 $(this).attr("title", $("img",this).attr("src").split("/")[1] +"-"+ $("h3",this).text() )
1236             });
1237 
1238             $(".demoList li:not(‘.o‘)").click(function(){
1239                 $("#displayBox h3").text(  $("h3",this).text() );
1240                 $("#displayBox iframe").attr("src",$("img",this).attr("src").replace(".jpg",".html"));
1241                 $("#displayBox").show();
1242             });
1243 
1244             //当前效果代码
1245             $("#displayBox .hd a").click(function(){ $("#displayBox").hide() }); //关闭隐藏盒子
1246             $("#displayBox").blur( function(){ $(this).hide } );
1247 
1248             var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
1249             if( isIE6 ){ $(window).scroll(function(){ $("#displayBox").css("top", $(document).scrollTop()+10) }); }
1250     </script>
1251 
1252 
1253 <!-- 右侧导航 -->
1254 
1255 <div class="rightNav">
1256     <a href="#content"><em>^</em>回到顶部</a>
1257     <a href="#effect1"><em>1</em>书签切换</a>
1258     <a href="#effect2"><em>2</em>幻灯片</a>
1259     <a href="#effect3"><em>3</em>图片滚动-左</a>
1260     <a href="#effect4"><em>4</em>图片滚动-上</a>
1261     <a href="#effect5"><em>5</em>图片无缝滚动-左</a>
1262     <a href="#effect6"><em>6</em>图片无缝滚动-上</a>
1263     <a href="#effect7"><em>7</em>文字滚动-左</a>
1264     <a href="#effect8"><em>8</em>文字滚动-上</a>
1265     <a href="#effect9"><em>9</em>文字无缝滚动-左</a>
1266     <a href="#effect10"><em>10</em>文字无缝滚动-上</a>
1267     <a class="new" href="#effect11"><em>11</em>常用导航 [v2.1]</a>
1268     <a class="new" href="#effect12"><em>12</em>手风琴 [v2.1]</a>
1269     <a href="#effectT1"><em>T1</em>其它基础效果</a>
1270 
1271 </div>
1272 <script type="text/javascript">
1273     //右侧导航
1274     var btb=$(".rightNav");
1275     var tempS;
1276     $(".rightNav").hover(function(){
1277             var thisObj = $(this);
1278             tempS = setTimeout(function(){
1279             thisObj.find("a").each(function(i){
1280                 var tA=$(this);
1281                 setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
1282             });
1283         },200);
1284 
1285     },function(){
1286         if(tempS){ clearTimeout(tempS); }
1287         $(this).find("a").each(function(i){
1288             var tA=$(this);
1289             setTimeout(function(){ tA.animate({right:"-110"},200,function(){
1290             });},50*i);
1291         });
1292 
1293     });
1294     var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
1295 
1296     //滚动加载
1297     var scrollLoad =function(){
1298         $("#content iframe[_src]").each(function(){
1299                 var t = $(this);
1300                 if( t.offset().top<= $(document).scrollTop() + $(window).height()  )
1301                 {
1302                     t.attr( "src",t.attr("_src") ).removeAttr("_src");
1303                 }
1304         });//each E
1305     }
1306 
1307     scrollLoad();
1308     $(window).scroll(function(){ 
1309         if(isIE6){ btb.css("top", $(document).scrollTop()+30) }
1310         scrollLoad();
1311     });
1312 </script>
1313 
1314 
1315 <div id="footer">Copyright ©2011-2013 大话主席 </div>
1316 
1317 
1318 </body>
1319 </html>
1320 <script type="text/javascript">
1321 //百度统计代码
1322 var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
1323 document.write(unescape("%3Cscript src=‘" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1‘ type=‘text/javascript‘%3E%3C/script%3E"));
1324 </script>
View Code

 

多功能前台交互效果插件superSlide

标签:des   class   style   log   com   http   it   si   la   

原文:http://www.cnblogs.com/zhixi/p/5933549.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号