平时我们常用的“焦点图/幻灯片”“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}});
未压缩js文件
/*!
* SuperSlide v2.1.1
* 轻松解决网站大部分特效展示问题
* 详尽信息请看官网：http://www.SuperSlide2.com/
*
* Copyright 2011-2013, 大话主席
*
* 请尊重原创，保留头部版权
* 在保留版权的前提下可应用于个人或商业用途 * v2.1.1：修复当调用多个SuperSlide，并设置returnDefault:true 时返回defaultIndex索引错误 */ (function($){
$.fn.slide=function(options){
$.fn.slide.defaults={
type:"slide",
effect:"fade",
autoPlay:false,
delayTime:500,
interTime:2500,
triggerTime:150,
defaultIndex:0,
titCell:".hd li",
mainCell:".bd",
targetCell:null,
trigger:"mouseover",
scroll:1,
vis:1,
titOnClassName:"on",
autoPage:false,
prevCell:".prev",
nextCell:".next",
pageStateCell:".pageState",
opp: false,
pnLoop:true,
easing:"swing",
startFun:null,
endFun:null,
switchLoad:null, playStateCell:".playState",
mouseOverStop:true,
defaultPlay:true,
returnDefault:false
}; return this.each(function() { var opts = $.extend({},$.fn.slide.defaults,options);
var slider = $(this);
var effect = opts.effect;
var prevBtn = $(opts.prevCell, slider);
var nextBtn = $(opts.nextCell, slider);
var pageState = $(opts.pageStateCell, slider);
var playState = $(opts.playStateCell, slider); var navObj = $(opts.titCell, slider);//导航子元素结合
var navObjSize = navObj.size();
var conBox = $(opts.mainCell , slider);//内容元素父层对象
var conBoxSize=conBox.children().size();
var sLoad=opts.switchLoad;
var tarObj = $(opts.targetCell, slider); /*字符串转换*/
var index=parseInt(opts.defaultIndex);
var delayTime=parseInt(opts.delayTime);
var interTime=parseInt(opts.interTime);
var triggerTime=parseInt(opts.triggerTime);
var scroll=parseInt(opts.scroll);
var vis=parseInt(opts.vis);
var autoPlay = (opts.autoPlay=="false"||opts.autoPlay==false)?false:true;
var opp = (opts.opp=="false"||opts.opp==false)?false:true;
var autoPage = (opts.autoPage=="false"||opts.autoPage==false)?false:true;
var pnLoop = (opts.pnLoop=="false"||opts.pnLoop==false)?false:true;
var mouseOverStop = (opts.mouseOverStop=="false"||opts.mouseOverStop==false)?false:true;
var defaultPlay = (opts.defaultPlay=="false"||opts.defaultPlay==false)?false:true;
var returnDefault = (opts.returnDefault=="false"||opts.returnDefault==false)?false:true; var slideH=0;
var slideW=0;
var selfW=0;
var selfH=0;
var easing=opts.easing;
var inter=null;//autoPlay-setInterval
var mst =null;//trigger-setTimeout
var rtnST=null;//returnDefault-setTimeout
var titOn = opts.titOnClassName; var onIndex = navObj.index( slider.find( "."+titOn) );
var oldIndex = index = onIndex==-1?index:onIndex;
var defaultIndex = index; var _ind = index;
var cloneNum = conBoxSize>=vis?( conBoxSize%scroll!=0?conBoxSize%scroll:scroll):0;
var _tar;
var isMarq = effect=="leftMarquee" || effect=="topMarquee"?true:false; var doStartFun=function(){ if ( $.isFunction( opts.startFun) ){ opts.startFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
var doEndFun=function(){ if ( $.isFunction( opts.endFun ) ){ opts.endFun( index,navObjSize,slider,$(opts.titCell, slider),conBox,tarObj,prevBtn,nextBtn ) } }
var resetOn=function(){ navObj.removeClass(titOn); if( defaultPlay ) navObj.eq(defaultIndex).addClass(titOn) } //单独处理菜单效果
if( opts.type=="menu" ){ if( defaultPlay ){ navObj.removeClass(titOn).eq(index).addClass(titOn); }
navObj.hover(
function(){
_tar=$(this).find( opts.targetCell );
var hoverInd =navObj.index($(this)); mst = setTimeout(function(){
index=hoverInd;
navObj.removeClass(titOn).eq (index).addClass(titOn);
doStartFun();
switch (effect)
{
case "fade":_tar.stop(true,true).animate({opacity:"show"}, delayTime,easing,doEndFun ); break;
case "slideDown":_tar.stop(true,true).animate({height:"show"}, delayTime,easing,doEndFun ); break;
}
} ,opts.triggerTime); },function(){
clearTimeout(mst);
switch (effect){ case "fade":_tar.animate( {opacity:"hide"},delayTime,easing ); break; case "slideDown":_tar.animate( {height:"hide"},delayTime,easing ); break; }
}
); if (returnDefault){
slider.hover(function(){clearTimeout(rtnST);},function(){ rtnST = setTimeout( resetOn,delayTime ); });
} return;
} //处理分页
if( navObjSize==0 )navObjSize=conBoxSize;//只有左右按钮
if( isMarq ) navObjSize=2;
if( autoPage ){
if(conBoxSize>=vis){
if( effect=="leftLoop" || effect=="topLoop" ){ navObjSize=conBoxSize%scroll!=0?(conBoxSize/scroll^0)+1:conBoxSize/scroll; }
else{
var tempS = conBoxSize-vis;
navObjSize=1+parseInt(tempS%scroll!=0?(tempS/scroll+1):(tempS/scroll));
if(navObjSize<=0)navObjSize=1;
}
}
else{ navObjSize=1 } navObj.html("");
var str=""; if( opts.autoPage==true || opts.autoPage=="true" ){ for( var i=0; i<navObjSize; i++ ){ str+="<li>"+(i+1)+"</li>" } }
else{ for( var i=0; i<navObjSize; i++ ){ str+=opts.autoPage.replace("$",(i+1)) } }
navObj.html(str); var navObj = navObj.children();//重置导航子元素对象
} if(conBoxSize>=vis){ //当内容个数少于可视个数，不执行效果。
conBox.children().each(function(){ //取最大值
if( $(this).width()>selfW ){ selfW=$(this).width(); slideW=$(this).outerWidth(true); }
if( $(this).height()>selfH ){ selfH=$(this).height(); slideH=$(this).outerHeight(true); }
}); var _chr = conBox.children();
var cloneEle = function(){
for( var i=0; i<vis ; i++ ){ _chr.eq(i).clone().addClass("clone").appendTo(conBox); }
for( var i=0; i<cloneNum ; i++ ){ _chr.eq(conBoxSize-i-1).clone().addClass("clone").prependTo(conBox); }
} switch(effect)
{
case "fold": conBox.css({"position":"relative","width":slideW,"height":slideH}).children().css( {"position":"absolute","width":selfW,"left":0,"top":0,"display":"none"} ); break;
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;
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;
case "leftLoop":
case "leftMarquee":
cloneEle();
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;
case "topLoop":
case "topMarquee":
cloneEle();
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;
}
} //针对leftLoop、topLoop的滚动个数
var scrollNum=function(ind){
var _tempCs= ind*scroll;
if( ind==navObjSize ){ _tempCs=conBoxSize; }else if( ind==-1 && conBoxSize%scroll!=0){ _tempCs=-conBoxSize%scroll; }
return _tempCs;
} //切换加载
var doSwitchLoad=function(objs){ var changeImg=function(t){
for ( var i= t; i<( vis+ t); i++ ){
objs.eq(i).find("img["+sLoad+"]").each(function(){
var _this = $(this);
_this.attr("src",_this.attr(sLoad)).removeAttr(sLoad);
if( conBox.find(".clone")[0] ){ //如果存在.clone
var chir = conBox.children();
for ( var j=0 ; j< chir.size() ; j++ )
{
chir.eq(j).find("img["+sLoad+"]").each(function(){
if( $(this).attr(sLoad)==_this.attr("src") ) $(this).attr("src",$(this).attr(sLoad)).removeAttr(sLoad)
})
}
}
})
}
} switch(effect)
{
case "fade": case "fold": case "top": case "left": case "slideDown":
changeImg( index*scroll );
break;
case "leftLoop": case "topLoop":
changeImg( cloneNum+scrollNum(_ind) );
break;
case "leftMarquee":case "topMarquee":
var curS = effect=="leftMarquee"? conBox.css("left").replace("px",""):conBox.css("top").replace("px","");
var slideT = effect=="leftMarquee"? slideW:slideH;
var mNum=cloneNum;
if( curS%slideT!=0 ){
var curP = Math.abs(curS/slideT^0);
if( index==1 ){ mNum=cloneNum+curP }else{ mNum=cloneNum+curP-1 }
}
changeImg( mNum );
break;
}
}//doSwitchLoad end //效果函数
var doPlay=function(init){
// 当前页状态不触发效果
if( defaultPlay && oldIndex==index && !init && !isMarq ) return; //处理页码
if( isMarq ){ if ( index>= 1) { index=1; } else if( index<=0) { index = 0; } }
else{
_ind=index; if ( index >= navObjSize) { index = 0; } else if( index < 0) { index = navObjSize-1; }
} doStartFun(); //处理切换加载
if( sLoad!=null ){ doSwitchLoad( conBox.children() ) } //处理targetCell
if(tarObj[0]){
_tar = tarObj.eq(index);
if( sLoad!=null ){ doSwitchLoad( tarObj ) }
if( effect=="slideDown" ){
tarObj.not(_tar).stop(true,true).slideUp(delayTime);
_tar.slideDown( delayTime,easing,function(){ if(!conBox[0]) doEndFun() });
}
else{
tarObj.not(_tar).stop(true,true).hide();
_tar.animate({opacity:"show"},delayTime,function(){ if(!conBox[0]) doEndFun() });
}
} if(conBoxSize>=vis){ //当内容个数少于可视个数，不执行效果。
switch (effect)
{
case "fade":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().hide(); break;
case "fold":conBox.children().stop(true,true).eq(index).animate({opacity:"show"},delayTime,easing,function(){doEndFun()}).siblings().animate({opacity:"hide"},delayTime,easing);break;
case "top":conBox.stop(true,false).animate({"top":-index*scroll*slideH},delayTime,easing,function(){doEndFun()});break;
case "left":conBox.stop(true,false).animate({"left":-index*scroll*slideW},delayTime,easing,function(){doEndFun()});break;
case "leftLoop":
var __ind = _ind;
conBox.stop(true,true).animate({"left":-(scrollNum(_ind)+cloneNum)*slideW},delayTime,easing,function(){
if( __ind<=-1 ){ conBox.css("left",-(cloneNum+(navObjSize-1)*scroll)*slideW); }else if( __ind>=navObjSize ){ conBox.css("left",-cloneNum*slideW); }
doEndFun();
});
break;//leftLoop end case "topLoop":
var __ind = _ind;
conBox.stop(true,true).animate({"top":-(scrollNum(_ind)+cloneNum)*slideH},delayTime,easing,function(){
if( __ind<=-1 ){ conBox.css("top",-(cloneNum+(navObjSize-1)*scroll)*slideH); }else if( __ind>=navObjSize ){ conBox.css("top",-cloneNum*slideH); }
doEndFun();
});
break;//topLoop end case "leftMarquee":
var tempLeft = conBox.css("left").replace("px","");
if(index==0 ){
conBox.animate({"left":++tempLeft},0,function(){
if( conBox.css("left").replace("px","")>= 0){ conBox.css("left",-conBoxSize*slideW) }
});
}
else{
conBox.animate({"left":--tempLeft},0,function(){
if( conBox.css("left").replace("px","")<= -(conBoxSize+cloneNum)*slideW){ conBox.css("left",-cloneNum*slideW) }
});
}break;// leftMarquee end case "topMarquee":
var tempTop = conBox.css("top").replace("px","");
if(index==0 ){
conBox.animate({"top":++tempTop},0,function(){
if( conBox.css("top").replace("px","")>= 0){ conBox.css("top",-conBoxSize*slideH) }
});
}
else{
conBox.animate({"top":--tempTop},0,function(){
if( conBox.css("top").replace("px","")<= -(conBoxSize+cloneNum)*slideH){ conBox.css("top",-cloneNum*slideH) }
});
}break;// topMarquee end }//switch end
} navObj.removeClass(titOn).eq(index).addClass(titOn);
oldIndex=index;
if( !pnLoop ){ //pnLoop控制前后按钮是否继续循环
nextBtn.removeClass("nextStop"); prevBtn.removeClass("prevStop");
if (index==0 ){ prevBtn.addClass("prevStop"); }
if (index==navObjSize-1 ){ nextBtn.addClass("nextStop"); }
} pageState.html( "<span>"+(index+1)+"</span>/"+navObjSize); };// doPlay end //初始化执行
if( defaultPlay ){ doPlay(true); } if (returnDefault)//返回默认状态
{
slider.hover(function(){ clearTimeout(rtnST) },function(){
rtnST = setTimeout( function(){
index=defaultIndex;
if(defaultPlay){ doPlay(); }
else{
if( effect=="slideDown" ){ _tar.slideUp( delayTime, resetOn ); }
else{ _tar.animate({opacity:"hide"},delayTime,resetOn ); }
}
oldIndex=index;
},300 );
});
} ///自动播放函数
var setInter = function(time){ inter=setInterval(function(){ opp?index--:index++; doPlay() }, !!time?time:interTime); }
var setMarInter = function(time){ inter = setInterval(doPlay, !!time?time:interTime); }
// 处理mouseOverStop
var resetInter = function(){ if( !mouseOverStop ){clearInterval(inter); setInter() } }
// 前后按钮触发
var nextTrigger = function(){ if ( pnLoop || index!=navObjSize-1 ){ index++; doPlay(); if(!isMarq)resetInter(); } }
var prevTrigger = function(){ if ( pnLoop || index!=0 ){ index--; doPlay(); if(!isMarq)resetInter(); } }
//处理playState
var playStateFun = function(){ clearInterval(inter); isMarq?setMarInter():setInter(); playState.removeClass("pauseState") }
var pauseStateFun = function(){ clearInterval(inter);playState.addClass("pauseState"); } //自动播放
if (autoPlay) {
if( isMarq ){
opp?index--:index++; setMarInter();
if(mouseOverStop) conBox.hover(pauseStateFun,playStateFun);
}else{
setInter();
if(mouseOverStop) slider.hover( pauseStateFun,playStateFun );
}
}
else{ if( isMarq ){ opp?index--:index++; } playState.addClass("pauseState"); } playState.click(function(){ playState.hasClass("pauseState")?playStateFun():pauseStateFun() }); //titCell事件
if(opts.trigger=="mouseover"){
navObj.hover(function(){ var hoverInd = navObj.index(this); mst = setTimeout(function(){ index=hoverInd; doPlay(); resetInter(); },opts.triggerTime); }, function(){ clearTimeout(mst) });
}else{ navObj.click(function(){ index=navObj.index(this); doPlay(); resetInter(); }) } //前后按钮事件
if (isMarq){ nextBtn.mousedown(nextTrigger);
prevBtn.mousedown(prevTrigger);
//前后按钮长按10倍加速
if (pnLoop)
{
var st;
var marDown = function(){ st=setTimeout(function(){ clearInterval(inter); setMarInter( interTime/10^0 ) },150) }
var marUp = function(){ clearTimeout(st); clearInterval(inter); setMarInter() }
nextBtn.mousedown(marDown); nextBtn.mouseup(marUp);
prevBtn.mousedown(marDown); prevBtn.mouseup(marUp);
}
//前后按钮mouseover事件
if( opts.trigger=="mouseover" ){ nextBtn.hover(nextTrigger,function(){}); prevBtn.hover(prevTrigger,function(){}); }
}else{
nextBtn.click(nextTrigger);
prevBtn.click(prevTrigger);
} });//each End };//slide End })(jQuery); jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) { return jQuery.easing[jQuery.easing.def](x, t, b, c, d); },
easeInQuad: function (x, t, b, c, d) {return c*(t/=d)*t + b;},
easeOutQuad: function (x, t, b, c, d) {return -c *(t/=d)*(t-2) + b},
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},
easeInCubic: function (x, t, b, c, d) {return c*(t/=d)*t*t + b},
easeOutCubic: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b},
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},
easeInQuart: function (x, t, b, c, d) {return c*(t/=d)*t*t*t + b},
easeOutQuart: function (x, t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b},
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},
easeInQuint: function (x, t, b, c, d) {return c*(t/=d)*t*t*t*t + b},
easeOutQuint: function (x, t, b, c, d) {return c*((t=t/d-1)*t*t*t*t + 1) + b},
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},
easeInSine: function (x, t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b},
easeOutSine: function (x, t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b},
easeInOutSine: function (x, t, b, c, d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b},
easeInExpo: function (x, t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b},
easeOutExpo: function (x, t, b, c, d) {return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b},
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},
easeInCirc: function (x, t, b, c, d) {return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b},
easeOutCirc: function (x, t, b, c, d) {return c * Math.sqrt(1 - (t=t/d-1)*t) + b},
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},
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; }
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},
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; }
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},
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; }
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},
easeInBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b},
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},
easeInOutBack: function (x, t, b, c, d, s) {if (s == undefined) s = 1.70158;
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},
easeInBounce: function (x, t, b, c, d) {return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b},
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;}},
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;}
});
css文件
@charset "utf-8"; /* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,img { padding:; margin:; }
fieldset,img { border:; }
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; }
ol,ul,li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border:; } /*-- All --*/
html{ min-width:1000px; }
body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff; }
a{ color:#333; text-decoration:none; outline:none;}
a:hover {color:#f00; text-decoration:underline; }
table { border-collapse: collapse; border-spacing:; empty-cells:show; }
table td,table th{ border:#ddd solid 1px; padding: 5px 0; }
table th{ background:#39A4DC; color:#fff; }
table .new td{ color:#f60; font-weight:bold; } /* css三角形 */
.arrow,.arrow s { position:relative; display:block; font-size:; line-height:; width:; height:; border-color:transparent; border-style:dashed; border-width:5px; }
.arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }
.arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }
.arrowR:hover{ border-left-color:#f60; } .arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }
.arrowL s{ border-right-color:#fff; position:absolute; right:-7px; top:-5px; }
.arrowL:hover{ border-right-color:#f60; } .arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }
.arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }
.arrowT:hover{ border-bottom-color:#f60; } .arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }
.arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottom:-3px; }
.arrowB:hover{ border-top-color:#f60; } /* css圆形 */
.circle{ line-height:100%; overflow:hidden; font-family:Tahoma,Helvetica; font-size:18px; color:#aaa; }
.circle:hover{ color:#f60; } /* 顶部导航条 */
#header{ width:100%; left:; top:; position:fixed; z-index:; height:32px; line-height:32px; color:#fff; text-align:left; overflow:hidden; }
#header .headerBg{ width:100%; height:32px; left:; top:; position:absolute; z-index:; background:#000; filter:alpha(opacity=70);opacity:0.7; }
#header a{ color:#fff; }
#header #logo{ position:relative; z-index:; display:inline-block; *display:inline; zoom:; font-size:14px; margin-right:5px; padding-left:10px; }
#header .nav{ position:relative; z-index:; float:right; padding-right:10px; }
#header .nav a{ padding:0 10px; }
#header .nav a.imp{ color:#ff0; }
#header .title{ position:relative; z-index:; height:32px; overflow:hidden; } #content{ margin:0 auto; padding:62px 30px 30px 30px; position:relative; text-align:left; z-index:; }
#footer{ height:34px; line-height:34px; text-align:center; } /* 首页 - index.html ---------------------------------------------- */ .indBtn{ text-align:center; display:none; }
.indBtn a{ vertical-align:middle; margin:15px 15px 0 0; display:inline-block; *display:inline; zoom:; padding:14px 22px 3px 22px; line-height:26px;
color:#bede9a; font-size:14px;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#89c941;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89c941), to(#72b238));
background: -webkit-linear-gradient(#89c941, #72b238);
background: -moz-linear-gradient(#89c941, #72b238);
background: -ms-linear-gradient(#89c941, #72b238);
background: -o-linear-gradient(#89c941, #72b238);
background: linear-gradient(#89c941, #72b238);
-pie-background: linear-gradient(#89c941, #72b238);
-webkit-box-shadow: #39591c 2px 2px 3px;
-moz-box-shadow: #39591c 2px 2px 3px;
box-shadow: #39591c 2px 2px 3px;
}
.indBtn a em{ font-size:30px; display:block; color:#fff; }
.indIntro a:hover{ text-decoration:none; margin:11px 15px 0 0; } .indTips{ position:fixed; _position:absolute; width:14px; right:; top:90px; background:#333; padding:5px; line-height:18px; color:#fff; cursor:pointer;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
}
.indTips a{ color:#fff; text-decoration:none; }
#indTips1{ display:none; }
#ind2{ display:none; }
#ind2 .topic{ font-size:60px; height:120px; line-height:120px; } /* 参数 - param.html ---------------------------------------------- */
.paramPage .param{ width:100%; margin-bottom:20px; background:#fff; }
.paramPage .param th{ text-align:center; }
.paramPage .param td{ text-align:left; padding:5px 2px; }
.paramPage .param .intro{ text-align:left; }
.paramPage .param .link{ color:#39A4DC; text-decoration:underline; }
.paramPage .param .t b{ color:#f60; }
.paramPage .param i{ color:#f60; }
.paramPage .param .on td{ background:#ffffaa; }
/*.paramPage .param tr.n td{ color:#999; }*/
.paramPage .intro a{ text-decoration:underline; }
.paramPage .notice{ overflow:hidden; text-align:left; padding-bottom:10px; }
.paramPage .notice li{ width:120px; height:30px; line-height:30px; text-align:center; float:left; margin-right:10px; color:#fff; background:#666; cursor:pointer; }
.paramPage .notice .on{ background:#f60; } /* 联系作者 ---------------------------------------------- */
#content .contact{ display:none; color:#f60; margin-bottom:20px; } /* 案例 - demo.html ---------------------------------------------- */ .demoBox{ padding:0 20px 60px 20px; background:#f2f2f2; border-bottom:3px dotted #ccc; }
.demoBox .hd{ padding:40px 10px 0 10px; }
.demoBox .hd h3{ font-size:30px; font-weight:bold; color:#39A4DC; line-height:60px; }
.demoBox .hd h3 span{ color:#ccc; font-style:italic; font-size:60px; }
.demoBox .bd{ padding:20px; overflow:hidden; zoom:; }
.demoBox .bd .iframeWrap{ overflow:hidden; float:left; }
.demoBox iframe{ width:100%; height:100%; vertical-align:middle; }
.demoBox .botTit{ height:22px; line-height:22px; overflow:hidden; background:#eee; text-align:right; padding:5px 0; overflow:hidden; display:none;
}
.demoBox .botTit em{ float:left; font-weight:bold; padding-left:10px; }
.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; }
.demoBox .botTit span a:hover{ text-decoration:none; background:#f60; } .params{ width:580px; height:100%; margin-left:20px; float:left; _display:inline; background:#fff; padding-bottom:10px; border:1px solid #ddd; }
.params table{ background:#fff; }
.params table .tit td{ padding: 5px 10px; background:#39A4DC; color:#fff; }
.params table td{ border:1px solid #fff; }
.params table .n{ width: 153px; text-align:right; }
.params table .new{ color:#f00; }
.params table i{ color:#999; }
.params p{ padding:10px 0 0 10px; }
.params .curJsCode{ color:#f60; display:block; font-family:SimSun; } .rightNav{ position:fixed; width:140px; right:; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
.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; }
.rightNav a:hover{ text-decoration:none; color:#39A4DC; }
.rightNav a:hover em{ background:#00b700}
.rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
.rightNav a.new em{ background:#f60; }
.demoBox .iframeWrap{ width:452px; }
.demoBox .iframeWrap iframe{ width:452px; height:232px; background:url(images/loading.gif) center center no-repeat; } #picScroll-left iframe{ height:174px; }
#picScroll-top iframe{ height:415px; }
#picMarquee-left iframe{ height:172px; }
#picMarquee-top iframe{ height:415px; }
#txtScroll-left iframe{ height:80px; }
#txtScroll-top iframe{ height:182px; }
#txtMarquee-left iframe{ height:107px; }
#txtMarquee-top iframe{ height:184px; }
#sideMenu iframe{ height:227px; } /* 隐藏代码盒子 */
#displayBox{ z-index:; display:none; position:fixed; _position:absolute; width:1000px; height:500px; left:50%; top:60px; margin-left:-500px; background:#fff;
border:5px solid #eee;
-webkit-box-shadow: #333 0 0 8px;
-moz-box-shadow: #333 0 0 8px;
box-shadow: #333 0 0 8px; }
#displayBox .hd{ height:30px; line-height:30px; background:#eee; padding:0 10px; position:relative;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#eee));
background: -webkit-linear-gradient(#F7F7F7, #eee);
background: -moz-linear-gradient(#F7F7F7, #eee);
background: -ms-linear-gradient(#F7F7F7, #eee);
background: -o-linear-gradient(#F7F7F7, #eee);
background: linear-gradient(#F7F7F7, #eee);
}
#displayBox .hd h3{ font-weight:bold; color:#39A4DC; }
#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; }
#displayBox .hd a:hover{ text-decoration:none; }
#displayBox .bd{ padding:10px 0; background:#fff; }
#displayBox textarea{ width:458px; height:230px; padding:10px; border:1px solid #ccc; display:block; }
#displayBox .bd p{ padding-top:10px; }
#displayBox iframe{ width:1000px; height:440px; margin:0 auto; } /* 扩展效果 ---------------------------------------------- */
.authorWord{ margin-bottom:25px; text-align:left; background:#fff; }
.authorWord h3{ padding:0 20px; height:30px; font:normal 14px/30px "Microsoft YaHei"; overflow:hidden; cursor:pointer; border-bottom:1px dotted #ccc; }
.authorWord h3 .arrow{ float:right; border-top-color:#fff; margin-top:11px; }
.authorWord .con{ padding:10px 20px; line-height:22px; }
.authorWord .con p{ margin-bottom:5px }
.authorWord a{ color:#f60; text-decoration:underline; } .demoList{ overflow:hidden; padding-top:10px; }
.demoList li{
position:relative; cursor:pointer; float:left; width:160px; text-align:center; margin:0 30px 30px 0;
padding:4px 4px 0 4px; background:#e3e3e3; color:#000;
}
.demoList li img{ display:block; width:160px; height:120px; background:url(images/loading.gif) center center no-repeat; }
.demoList li h3{ height:28px; line-height:28px; }
.demoList li.new i{ display:block; position:absolute; top:4px; right:4px; z-index:; width:31px; height:31px; background:url(images/new.png) 0 0 no-repeat; } .demoList li.on{
background:#666; color:#fff;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
-moz-transition-duration:0.3s;
} .demoBoxEven{ background:#fff; }
.demoBoxEven .demoList li{ }
.demoBoxEven .demoList li.on{ background:#666; color:#fff; } /* 如何使用 ---------------------------------------------- */
.usePageDl{ width:1000px; }
.usePageDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.usePageDl dt h2 a{ color:#f60; text-decoration:underline; }
.usePageDl dt p{ padding:5px 0 10px 33px; }
.usePageDl dt p b{ color:#f60; }
.usePageDl dd{ margin-bottom:50px; }
.usePage .demoBox{ padding:; }
.usePage .demoBox .bd .iframeWrap{ background:none; } /* 下载页面 ----------------------------------------------- */
.downLoadDl{ width:1000px; }
.downLoadDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.downLoadDl dt h2 a{ font-size:12px; color:#333; margin-left:20px; text-decoration:underline; }
.downLoadDl dd{ margin-bottom:50px; padding:10px 0; } .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;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
-webkit-box-shadow: #666 1px 1px 2px;
-moz-box-shadow: #666 1px 1px 2px;
box-shadow: #666 1px 1px 2px;
}
.dBtn:hover{ text-decoration:none; background:#65ca00; color:#fff; margin-left:2px; }
.pBtn{ background:#FFA241; font-size:12px; }
.pBtn:hover{ background:#ff8635; }
.pBtn i{ font-family:Arial; _font-weight:bold; font-size:20px; } .downPage .inculde{ margin-top:20px; padding:10px; border:1px dotted #eee; background:#f3f3f3;}
.downPage .inculde li{ color:#666; }
.downPage .inculde em{ font-weight:bold; color:#333; }
.downPage .inculde h3{ font-size:14px; font-weight:bold; color:#c00; padding-bottom:10px }
.downPage .inculde a{ color:#39A4DC; text-decoration:underline; margin:0 2px; }
#whyPay p,#howPay p{ text-indent:20px; margin-bottom:10px } .pay{ overflow:hidden; padding-bottom:5px; vertical-align:top; }
.pay .pBtn{ float:left; }
.pay p{ margin-left:120px; }
.pay p span{ color:#c00; }
.downPage .imp{ color:#c00; font-size:14px; } /* 颜色代码
#39A4DC 浅蓝色 */
页面调用
<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>
/* css 重置 */
*{margin:; padding:; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:; }
a{ text-decoration:none; color:#333; } /* 本例子css */
.slideBox{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:; }
.slideBox .hd ul{ overflow:hidden; zoom:; float:left; }
.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:; }
.slideBox .bd li{ zoom:; vertical-align:middle; }
.slideBox .bd img{ width:450px; height:230px; display:block; } /* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.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; }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta property="wb:webmaster" content="125d4c886033b1d0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery万能特效,jQuery幻灯片,jQuery焦点图,jQuery Tab切换,jQuery图片滚动,jQuery无缝滚动">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 基础效果</title>
<script type="text/javascript" src="jquery1.42.min.js"></script>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css">
#content{ padding:32px 0 30px 0; }
</style>
<!-- header S -->
<div id="header" name="header">
<div class="headerBg"></div>
<span class="nav">
<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>
</span>
<div class="title">
<h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.1</em><span class="author"> -- 大话主席</span>
</div>
</div>
<!-- header E --> <!-- content S -->
<div id="content" name="content"> <!-- 1 switchTab S -->
<div id="switchTab" class="demoBox">
<div name="effect1" id="effect1" class="hd"><h3><span>1. </span>标签切换 / 书签切换 / 默认效果</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/1.0-switchTab-iframe.html?" frameborder="0"></iframe>
<p class="botTit"><em>1.0-标签切换</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="fold">fold</option>
<option value="left">left</option>
<option value="top">top</option>
<option value="leftLoop">leftLoop</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
<tr>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".slideTxtBox").slide({<i></i>});</span></p>
<p class="notice">注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。<br/></p>
</div> </div><!-- bd E -->
</div>
<!-- 1 switchTab E --> <!-- 2 focusNews S -->
<div id="focusNews" class="demoBox ">
<div name="effect2" id="effect2" class="hd"><h3><span>2. </span>焦点图 / 幻灯片</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/2.0-focus-iframe.html?&fade&true" frameborder="0"></iframe>
<p class="botTit"><em>2.0-焦点图/幻灯片</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="fold">fold</option>
<option value="left">left</option>
<option value="top">top</option>
<option value="leftLoop">leftLoop</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr>
<tr>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".slideBox").slide({mainCell:".bd ul"<i></i>});</span></p>
<p class="notice">注意：缓动效果对于fade影响不大;不同缓动效果设置适当“效果速度”，会有最佳效果。<br/></p>
</div> </div><!-- bd E -->
</div>
<!-- 2 focusNews E --> <!-- 3 picScroll-left S -->
<div id="picScroll-left" class="demoBox ">
<div name="effect3" id="effect3" class="hd"><h3><span>3. </span>图片滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/3.0-picScroll-left-iframe.html?&left&true&1&3" frameborder="0"></iframe>
<p class="botTit"><em>3.0-图片滚动-左</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="left" class="show">left</option>
<option value="leftLoop">leftLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div> </div><!-- bd E -->
</div>
<!-- 3 picScroll-left E --> <!-- 4 picScroll-top S -->
<div id="picScroll-top" class="demoBox ">
<div name="effect4" id="effect4" class="hd"><h3><span>4. </span>图片滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/4.0-picScroll-top-iframe.html?&top&true&1&3" frameborder="0"></iframe>
<p class="botTit"><em>4.0-图片滚动-上</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="top" class="show">top</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div> </div><!-- bd E -->
</div>
<!-- 4 picScroll-top E --> <!-- 5 picMarquee-left S -->
<div id="picMarquee-left" class="demoBox ">
<div name="effect5" id="effect5" class="hd"><h3><span>5. </span>图片无缝滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/5.0-picMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>5.0-图片无缝滚动-左</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="leftMarquee" class="show">leftMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 5 picMarquee-left E --> <!-- 6 picMarquee-top S -->
<div id="picMarquee-top" class="demoBox ">
<div name="effect6" id="effect6" class="hd"><h3><span>6. </span>图片无缝滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/6.0-picMarquee-top-iframe.html?&topMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>6.0-图片无缝滚动-上</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="topMarquee" class="show">topMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr> </table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 6 picMarquee-top E --> <!-- 7 txtScroll-left S -->
<div id="txtScroll-left" class="demoBox ">
<div name="effect7" id="effect7" class="hd"><h3><span>7. </span>文字滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/7.0-txtScroll-left-iframe.html?&left&true&2&2" frameborder="0"></iframe>
<p class="botTit"><em>7.0-文字滚动-左</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="left" class="show">left</option>
<option value="leftLoop">leftLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div> </div><!-- bd E -->
</div>
<!-- 7 txtScroll-left E --> <!-- 8 txtScroll-top S -->
<div id="txtScroll-top" class="demoBox ">
<div name="effect8" id="effect8" class="hd"><h3><span>8. </span>文字滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/8.0-txtScroll-top-iframe.html?&top&true&1&5" frameborder="0"></iframe>
<p class="botTit"><em>8.0-文字滚动-上</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="top" class="show">top</option>
<option value="topLoop">topLoop</option>
</select>
</td>
<td class="n">自动运行<i>[autoPlay]</i>:</td>
<td>
<select name="autoPlay">
<option value="false">false</option>
<option selected="selected" value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">滚动个数<i>[scroll]</i>:</td>
<td>
<select name="scroll">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing"> <option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
<p class="notice">注意1：不同缓动效果设置适当“效果速度”，会有最佳效果。<br/>
注意2：现在是全按钮开启情况，不需要按钮的时候，只要删除按钮html或者隐藏即可。
</p>
</div> </div><!-- bd E -->
</div>
<!-- 8 txtScroll-top E --> <!-- 9 txtMarquee-left S -->
<div id="txtMarquee-left" class="demoBox ">
<div name="effect9" id="effect9" class="hd"><h3><span>9. </span>文字无缝滚动-左</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/9.0-txtMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>9.0-文字无缝滚动-左</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="leftMarquee" class="show">leftMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="2" selected="selected">2</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 9 txtMarquee-left E --> <!-- 10 txtMarquee-top S -->
<div id="txtMarquee-top" class="demoBox ">
<div name="effect10" id="effect10" class="hd"><h3><span>10. </span>文字无缝滚动-上</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/10.0-txtMarquee-top-iframe.html?&topMarquee&5&50&false&true&click" frameborder="0"></iframe>
<p class="botTit"><em>10.0-文字无缝滚动-上</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="topMarquee" class="show">topMarquee</option>
</select>
</td>
<td class="n">可视个数<i>[vis]</i>:</td>
<td>
<select name="vis">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</td>
</tr>
<tr>
<td class="n">运行速度<i>[interTime]</i>:</td>
<td>
<select name="interTime">
<option value="50" class="show">50</option>
<option value="25">25</option>
<option value="10">10</option>
</select>
</td>
<td class="n">默认反方向运动<i>[opp]</i>:</td>
<td>
<select name="opp">
<option value="false">false</option>
<option value="true">true</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效">前后按钮循环<i>[pnLoop]</i>:</td>
<td>
<select name="pnLoop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：长按按钮10倍加速运行。">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click" selected="selected">click</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移到容器层是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
<td>
<select name="mouseOverStop">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
</table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 10 txtMarquee-top E --> <!-- 11 nav S -->
<div id="topNav" class="demoBox ">
<div name="effect11" id="effect11" class="hd"><h3><span>11. </span>导航</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/11.0-nav-iframe.html?&slideDown&300&0&true&true&" frameborder="0"></iframe>
<p class="botTit"><em>12.0-导航</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="slideDown" selected="selected">slideDown</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="300" selected="selected">300</option>
<option value="100">100</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
<td>
<select name="triggerTime">
<option value="150">150</option>
<option value="300">300</option>
<option value="0" selected="selected">0</option>
</select>
</td>
<td class="n new" title="v2.1 新增：默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
<td>
<select name="defaultPlay">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：鼠标移走，0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
<td>
<select name="returnDefault">
<option value="false">false</option>
<option value="true" selected="selected">true</option>
</select>
</td>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr> </table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 11 nav E --> <!-- 12 sideMenu S -->
<div id="sideMenu" class="demoBox ">
<div name="effect12" id="effect12" class="hd"><h3><span>12. </span>手风琴</h3></div>
<div class="bd">
<div class="iframeWrap">
<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/12.0-sideMenu-iframe.html?&slideDown&300&mouseover&150&true&true&" frameborder="0"></iframe>
<p class="botTit"><em>13.0-手风琴</em></p>
</div> <div class="params">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="tit"> <td colspan="4">常用参数(切换看看)</td> </tr>
<tr>
<td class="n">效果<i>[effect]</i>:</td>
<td>
<select rel="string" name="effect">
<option value="fade">fade</option>
<option value="slideDown" selected="selected">slideDown</option>
</select>
</td>
<td class="n">效果速度<i>[delayTime]</i>:</td>
<td>
<select name="delayTime">
<option value="500">500</option>
<option value="300" selected="selected">300</option>
<option value="100">100</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n">触发方式<i>[trigger]</i>:</td>
<td>
<select rel="string" name="trigger">
<option value="mouseover">mouseover</option>
<option value="click">click</option>
</select>
</td>
<td class="n" title="鼠标停留多少毫秒后才触发效果">延迟触发<i>[triggerTime]</i>:</td>
<td>
<select name="triggerTime">
<option value="150">150</option>
<option value="300">300</option>
<option value="0">0</option>
</select>
</td>
</tr>
<tr>
<td class="n new" title="v2.1 新增：默认是否执行效果">默认执行<i>[defaultPlay]</i>:</td>
<td>
<select name="defaultPlay">
<option value="true">true</option>
<option value="false">false</option>
</select>
</td>
<td class="n new" title="v2.1 新增：鼠标移走，0.3秒后返回默认状态">返回默认<i>[returnDefault]</i>:</td>
<td>
<select name="returnDefault">
<option value="false">false</option>
<option value="true" selected="selected">true</option>
</select>
</td>
</tr>
<tr>
<td class="n">缓动效果<i>[easing]</i>:</td>
<td>
<select rel="string" name="easing">
<option value="swing">swing</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easing-more">更多</option>
</select>
</td>
</tr> </table>
<p class="jsCode">当前调用代码：<span class="curJsCode">jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1<i></i>});</span></p>
</div> </div><!-- bd E -->
</div>
<!-- 12 sideMenu E --> <!-- T1 others S -->
<div id="others" class="demoBox">
<div name="effectT1" id="effectT1" class="hd"><h3><span>T1. </span>其它基础效果</h3></div>
<div class="bd"> <ul class="demoList">
<li>
<div class="pic">
<img src="demo/T1.1-multipleLine.jpg" />
</div>
<h3>多行滚动基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.2-multipleColumn.jpg" />
</div>
<h3>多列滚动基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.3-targetCell.jpg" />
</div>
<h3>targetCell基础示例</h3>
</li>
<li>
<div class="pic">
<img src="demo/T1.4-SuperSlideGroup.jpg" />
</div>
<h3>SuperSlide组合应用基础示例</h3>
</li>
<li class="o">
<div class="pic">
<a href="demo/T1.5-onePage.html" target="_blank"><img src="demo/T1.5-onePage.jpg" /></a>
</div>
<h3>同一页面使用多个效果示例</h3>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.6-doubleTab.jpg" />
</div>
<h3>双重Tab（slide组合）</h3>
<i></i>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.7-tabMarquee.jpg" />
</div>
<h3>Tab+无缝滚动（slide组合）</h3>
<i></i>
</li>
<li class="new">
<div class="pic">
<img src="demo/T1.8-picFocus.jpg" />
</div>
<h3>图片导航焦点图</h3>
<i></i>
</li>
</ul> </div><!-- bd E -->
</div>
<!-- T1 others E --> <script type="text/javascript">
//隔行添加demoBoxEven
$(".demoBox").each(function(i){ if (i%2==0)$(this).addClass("demoBoxEven"); });
//当前调用代码初始化
$(".params").each(function(ind){
$(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
}); //切换参数调用切换不同效果
$(".params select").change(function(){ if($(this).val()=="easing-more"){ window.open("otherDemo/T2.1/easing.html"); return; } var srcStr="";
var ind=$(".params").index( $(this).closest(".params") ); var iframe = $(this).closest(".demoBox").find("iframe");
var selects = $(this).closest(".params").find("select"); selects.each(function(){
srcStr += "&"+$(this).val();
});
iframe.attr("src",iframe.attr("src").split('&')[0]+srcStr); $(".curJsCode").eq(ind).html(getJsCode(ind));
}); //当前调用代码
function getJsCode( ind ){
var curJsCode="";
var $cur = $(".curJsCode").eq(ind); $(".params").eq(ind).find("select").each(function(){
if( $("option",this).index( $("option:selected",this) ) !=0 || $("option",this).attr("class")=="show")
{
var tempVal = $(this).attr("rel")=="string"?('"'+$(this).val()+'"'):$(this).val();
curJsCode+= "," + $(this).attr("name")+":"+tempVal;
}
});
if(ind==0) curJsCode = curJsCode.substring(1);
$cur.find("i").html(curJsCode);
curJsCode = $cur.html();
return curJsCode;
} </script> </div>
<!-- content E --> <!-- 隐藏代码盒子 S -->
<div id="displayBox">
<div class="hd"><a>X</a><h3></h3></div>
<div class="bd">
<iframe allowTransparency="true" scrolling="yse" src="" frameborder="0"></iframe>
</div>
</div>
<script type="text/javascript"> $(".demoList li").hover(function(){ $(this).addClass("on") },function(){ $(this).removeClass("on") });
$(".demoList li").each(function(i){
$(this).attr("title", $("img",this).attr("src").split("/")[1] +"-"+ $("h3",this).text() )
}); $(".demoList li:not('.o')").click(function(){
$("#displayBox h3").text( $("h3",this).text() );
$("#displayBox iframe").attr("src",$("img",this).attr("src").replace(".jpg",".html"));
$("#displayBox").show();
}); //当前效果代码
$("#displayBox .hd a").click(function(){ $("#displayBox").hide() }); //关闭隐藏盒子
$("#displayBox").blur( function(){ $(this).hide } ); var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
if( isIE6 ){ $(window).scroll(function(){ $("#displayBox").css("top", $(document).scrollTop()+10) }); }
</script> <!-- 右侧导航 --> <div class="rightNav">
<a href="#content"><em>^</em>回到顶部</a>
<a href="#effect1"><em>1</em>书签切换</a>
<a href="#effect2"><em>2</em>幻灯片</a>
<a href="#effect3"><em>3</em>图片滚动-左</a>
<a href="#effect4"><em>4</em>图片滚动-上</a>
<a href="#effect5"><em>5</em>图片无缝滚动-左</a>
<a href="#effect6"><em>6</em>图片无缝滚动-上</a>
<a href="#effect7"><em>7</em>文字滚动-左</a>
<a href="#effect8"><em>8</em>文字滚动-上</a>
<a href="#effect9"><em>9</em>文字无缝滚动-左</a>
<a href="#effect10"><em>10</em>文字无缝滚动-上</a>
<a class="new" href="#effect11"><em>11</em>常用导航 [v2.1]</a>
<a class="new" href="#effect12"><em>12</em>手风琴 [v2.1]</a>
<a href="#effectT1"><em>T1</em>其它基础效果</a> </div>
<script type="text/javascript">
//右侧导航
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
var thisObj = $(this);
tempS = setTimeout(function(){
thisObj.find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"0"},200);},50*i);
});
},200); },function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"-110"},200,function(){
});},50*i);
}); });
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载
var scrollLoad =function(){
$("#content iframe[_src]").each(function(){
var t = $(this);
if( t.offset().top<= $(document).scrollTop() + $(window).height() )
{
t.attr( "src",t.attr("_src") ).removeAttr("_src");
}
});//each E
} scrollLoad();
$(window).scroll(function(){
if(isIE6){ btb.css("top", $(document).scrollTop()+30) }
scrollLoad();
});
</script> <div id="footer">Copyright ©2011-2013 大话主席 </div> </body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>