122

src/main/webapp/static/SuperSlide/default.css

@@ -0,0 +1,255 @@
+@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: 0; margin: 0; }
+fieldset,img { border: 0; }
+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: 0; }
+
+/*-- 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: 0; 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: 0; line-height: 0; width: 0; height: 0; 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:0; top:0; position:fixed; z-index:10;  height:32px; line-height:32px; color:#fff; text-align:left; overflow:hidden; }
+	#header .headerBg{ width:100%; height:32px; left:0; top:0; position:absolute; z-index:0; background:#000; filter:alpha(opacity=70);opacity:0.7;   }
+	#header a{ color:#fff;  }
+	#header #logo{ position:relative; z-index:1; display:inline-block; *display:inline; zoom:1; font-size:14px; margin-right:5px; padding-left:10px;   }
+	#header .nav{ position:relative; z-index:2; float:right; padding-right:10px; }
+	#header .nav a{ padding:0 10px;  }
+	#header .nav a.imp{ color:#ff0;  }
+	#header .title{ position:relative; z-index:1; height:32px; overflow:hidden;   }
+
+	#content{ margin:0 auto; padding:62px 30px 30px 30px;  position:relative; text-align:left; z-index:0; }
+	#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:1; 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:0; 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:1;  }
+	.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:0; 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:10; 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:1; 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:0;  }
+.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 浅蓝色
+
+*/

src/main/webapp/static/SuperSlide/demo/1.0-switchTab.html

@@ -0,0 +1,94 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery标签切换效果,Tab切换效果">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - Tab切换效果</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
+		.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px;   border-bottom:1px solid #ddd;  position:relative; }
+		.slideTxtBox .hd ul{ float:left;  position:absolute; left:20px; top:-1px; height:32px;   }
+		.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+		.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+		.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
+		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
+		.slideTxtBox .bd li .date{ float:right; color:#999;  }
+
+		/* 下面是前/后按钮代码，如果不需要删除即可 */
+		.slideTxtBox .arrow{  position:absolute; right:10px; top:0; }
+		.slideTxtBox .arrow a{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat; }
+		.slideTxtBox .arrow .next{ background-position:0 -50px;  }
+		.slideTxtBox .arrow .prevStop{ background-position:-60px 0; }
+		.slideTxtBox .arrow .nextStop{ background-position:-60px -50px; }
+
+		</style>
+
+
+		<div class="slideTxtBox">
+			<div class="hd">
+
+				<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
+				<span class="arrow"><a class="next"></a><a class="prev"></a></span>
+
+				<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+			</div>
+			<div class="bd">
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+				</ul>
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+				</ul>
+			</div>
+		</div>
+		<script type="text/javascript">jQuery(".slideTxtBox").slide();</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/10.0-txtMarquee-top.html

@@ -0,0 +1,71 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字无缝滚动特效-上</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.txtMarquee-top{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.txtMarquee-top .hd .next{ background-position:0 -140px;  }
+		.txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
+		.txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
+		.txtMarquee-top .bd{ padding:15px;  }
+		.txtMarquee-top .infoList li{ height:24px; line-height:24px;   }
+		.txtMarquee-top .infoList li .date{ float:right; color:#999;  }
+
+		</style>
+
+
+		<div class="txtMarquee-top">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+			jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/11.0-nav.html

@@ -0,0 +1,116 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 导航效果</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
+		.nav{ padding:0 20px; height:34px; line-height:34px; background:#39A4DC;  position:relative; z-index:1;  }
+		.nav a{ color:#fff;  }
+		.nav .nLi{ float:left;  position:relative; display:inline;  }
+		.nav .nLi h3{ float:left;  }
+		.nav .nLi h3 a{ display:block; padding:0 20px; font-size:14px; font-weight:bold;  }
+		.nav .sub{ display:none; width:100px; left:0; top:34px;  position:absolute; background:#4E4E4E;  line-height:26px; padding:5px 0;  }
+		.nav .sub li{ zoom:1; }
+		.nav .sub a{ display:block; padding:0 10px; }
+		.nav .sub a:hover{ background:#6d6d6d; color:#fff;  }
+		.nav .on h3 a{ background:#4E4E4E; color:#fff;   }
+		</style>
+
+
+		<ul id="nav" class="nav clearfix">
+			<li class="nLi">
+				<h3><a href="http://www.SuperSlide2.com" target="_blank">首页</a></h3>
+			</li>
+			<li class="nLi">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">新闻</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi on">
+			<!-- 假设当前频道为“预告片”，手动或后台程序添加titOnClassName类名（默认是'on'），相当于设置参数defaultIndex:1。若同时设置参数returnDefault:true，则鼠标移走后0.3秒返回当前频道 -->
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">预告片</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi ">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">影评</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">资料库</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+		</ul>
+
+
+		<div class="intro" style="padding:10px">
+			假设当前频道为“预告片”，</br>
+			手动或后台程序添加titOnClassName类名（默认是'on'），相当于设置参数defaultIndex:2。</br>
+			若同时设置参数returnDefault:true，则鼠标移走后返回当前频道。
+		</div>
+
+		<script id="jsID" type="text/javascript">
+			
+			jQuery("#nav").slide({ 
+				type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide）
+				titCell:".nLi", //鼠标触发对象
+				targetCell:".sub", //titCell里面包含的要显示/消失的对象
+				effect:"slideDown", //targetCell下拉效果
+				delayTime:300 , //效果时间
+				triggerTime:0, //鼠标延迟触发时间（默认150）
+				returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
+			});
+		</script>
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/12.0-sideMenu.html

@@ -0,0 +1,88 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,targetCell基础示例">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - targetCell基础示例</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+
+		/* 本例子css */
+		.sideMenu{  border:1px solid #ddd;  }
+		.sideMenu h3{ height:32px; line-height:32px; padding-left:10px;  border-top:1px solid #e3e3e3; background:#f4f4f4; cursor:pointer;
+			font:normal 14px/32px "Microsoft YaHei";
+		}
+		.sideMenu h3 em{ float:right; display:block; width:40px; height:32px;   background:url(images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
+		.sideMenu h3.on em{ background-position:16px -57px; }
+		.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }
+
+		</style>
+
+		<div class="sideMenu" style="margin:0 auto">
+			<h3><em></em>书签切换系列</h3>
+			<ul>
+				<li>淘宝首页右侧公告</li>
+				<li>京东首页产品切换</li>
+				<li>苏宁易购首页品牌切换</li>
+				<li>1号店双重切换</li>
+				<li>腾讯健康频道切换</li>
+			</ul>
+
+			<h3 class="on"><em></em>幻灯片/焦点图系列</h3>
+			<!-- 假设当前频道为“幻灯片/焦点图系列”，手动或后台程序添加titOnClassName类名（默认是'on'），相当于设置参数defaultIndex:1。若设置参数returnDefault:true，则鼠标移出.sideMen0.3秒可以返回当前频道 -->
+
+			<ul>
+				<li>淘宝首页焦点图</li>
+				<li>腾讯娱乐频道焦点图</li>
+				<li>腾讯电影频道焦点图</li>
+				<li>网易游戏频道焦点图</li>
+				<li>易迅首页焦点图</li>
+			</ul>
+			<h3><em></em>带按钮切换</h3>
+			<ul>
+				<li>淘宝首页今日活动</li>
+				<li>豆瓣读书频道</li>
+				<li>天猫首页品牌切换</li>
+				<li>格瓦拉首页活动进行中</li>
+				<li>腾讯博客图片滚动</li>
+			</ul>
+
+
+		</div><!-- sideMenu End -->
+
+		<script type="text/javascript">
+			jQuery(".sideMenu").slide({
+				titCell:"h3", //鼠标触发对象
+				targetCell:"ul", //与titCell一一对应，第n个titCell控制第n个targetCell的显示隐藏
+				effect:"slideDown", //targetCell下拉效果
+				delayTime:300 , //效果时间
+				triggerTime:150, //鼠标延迟触发时间（默认150）
+				defaultPlay:true,//默认是否执行效果（默认true）
+				returnDefault:true //鼠标从.sideMen移走后返回默认状态（默认false）
+				});
+		</script>
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/2.0-focus.html

@@ -0,0 +1,74 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery焦点图/幻灯片">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 焦点图/幻灯片</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		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:1; }
+		.slideBox .hd ul{ overflow:hidden; zoom:1; 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:0;   }
+		.slideBox .bd li{ zoom:1; 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:1;  }
+		.slideBox .prevStop{ display:none;  }
+		.slideBox .nextStop{ display:none;  }
+
+		</style>
+
+		<div id="slideBox" class="slideBox">
+			<div class="hd">
+				<ul><li>1</li><li>2</li><li>3</li></ul>
+			</div>
+			<div class="bd">
+				<ul>
+					<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></li>
+					<li><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>
+
+		<script type="text/javascript">
+		jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/3.0-picScroll-left.html

@@ -0,0 +1,93 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片滚动特效-左</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picScroll-left{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("images/arrow.png") no-repeat;}
+		.picScroll-left .hd .next{ background-position:0 -50px;  }
+		.picScroll-left .hd .prevStop{ background-position:-60px 0; }
+		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
+		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.picScroll-left .hd ul li.on{ background-position:0 0; }
+		.picScroll-left .bd{ padding:10px;   }
+		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
+		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.picScroll-left .bd ul li .pic{ text-align:center; }
+		.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picScroll-left .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picScroll-left">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/4.0-picScroll-top.html

@@ -0,0 +1,93 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片上滚动特效-上</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picScroll-top{ margin:0 auto;  width:210px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picScroll-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picScroll-top .hd .prev,.picScroll-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("images/arrow.png") 0 -100px no-repeat;}
+		.picScroll-top .hd .next{ background-position:0 -140px;  }
+		.picScroll-top .hd .prevStop{ background-position:-60px -100px;  }
+		.picScroll-top .hd .nextStop{ background-position:-60px -140px;  }
+		.picScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.picScroll-top .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.picScroll-top .hd ul li.on{ background-position:0 0; }
+		.picScroll-top .bd{ padding:10px;   }
+		.picScroll-top .bd ul{ overflow:hidden; zoom:1; }
+		.picScroll-top .bd ul li{ text-align:center; zoom:1; }
+		.picScroll-top .bd ul li .pic{ text-align:center; }
+		.picScroll-top .bd ul li .pic img{ width:180px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.picScroll-top .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picScroll-top .bd ul li .title{ line-height:24px; }
+
+		</style>
+
+		<div class="picScroll-top">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		 jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:3,trigger:"click"});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/5.0-picMarquee-left.html

@@ -0,0 +1,88 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片无缝滚动特效-左</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picMarquee-left{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picMarquee-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") no-repeat;}
+		.picMarquee-left .hd .next{ background-position:0 -50px;  }
+		.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
+		.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }
+		.picMarquee-left .bd{ padding:10px;   }
+		.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
+		.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.picMarquee-left .bd ul li .pic{ text-align:center; }
+		.picMarquee-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
+		.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picMarquee-left .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picMarquee-left">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:3,interTime:50});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/6.0-picMarquee-top.html

@@ -0,0 +1,88 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片无缝滚动特效-上</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picMarquee-top{ margin:0 auto;  width:210px; overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picMarquee-top .hd .prev,.picMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.picMarquee-top .hd .next{ background-position:0 -140px;  }
+		.picMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
+		.picMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
+		.picMarquee-top .bd{ padding:10px;   }
+		.picMarquee-top .bd ul{ overflow:hidden; zoom:1; }
+		.picMarquee-top .bd ul li{ text-align:center; zoom:1; }
+		.picMarquee-top .bd ul li .pic{ text-align:center; }
+		.picMarquee-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
+		.picMarquee-top .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picMarquee-top .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picMarquee-top">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/7.0-txtScroll-left.html

@@ -0,0 +1,71 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字滚动特效-左</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+		/* 本例子css */
+		.txtScroll-left{ width:450px;  position:relative;  border:1px solid #ccc;   }
+		.txtScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden; cursor:pointer; background:url("images/arrow.png") no-repeat;}
+		.txtScroll-left .hd .next{ background-position:0 -50px;  }
+		.txtScroll-left .hd .prevStop{ background-position:-60px 0; }
+		.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }
+		.txtScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px;  }
+		.txtScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.txtScroll-left .hd ul li.on{ background-position:0 0; }
+		.txtScroll-left .bd{ padding:10px; width:430px; overflow:hidden;    }
+		.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
+		.txtScroll-left .bd ul li{ margin-right:20px;  float:left; height:24px; line-height:24px;  text-align:left; _display:inline;}
+		.txtScroll-left .bd ul li span{ color:#999;  }
+		</style>
+
+		<div class="txtScroll-left">
+			<div class="hd">
+				<a class="next"></a>
+				<ul class="num"><li>1</li><li>2</li><li>3</li></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		 jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,scroll:2,vis:2,trigger:"click"});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/8.0-txtScroll-top.html

@@ -0,0 +1,74 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字滚动特效-上</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.txtScroll-top{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.txtScroll-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtScroll-top .hd .prev,.txtScroll-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("images/icoUp.gif") no-repeat;}
+		.txtScroll-top .hd .next{ background:url("images/icoDown.gif") no-repeat;  }
+		.txtScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
+		.txtScroll-top .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.txtScroll-top .hd ul li.on{ background-position:0 0; }
+		.txtScroll-top .bd{ padding:15px;  }
+		.txtScroll-top .infoList li{ height:24px; line-height:24px;   }
+		.txtScroll-top .infoList li .date{ float:right; color:#999;  }
+
+		</style>
+
+
+		<div class="txtScroll-top">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:5});
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/9.0-txtMarquee-left.html

@@ -0,0 +1,68 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字无缝滚动特效-左</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+		/* 本例子css */
+		.txtMarquee-left{ width:450px;  position:relative;  border:1px solid #ccc;   }
+		.txtMarquee-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtMarquee-left .hd .prev,.txtMarquee-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden; cursor:pointer; background:url("images/icoLeft.gif") no-repeat;}
+		.txtMarquee-left .hd .next{ background:url("images/icoRight.gif") no-repeat;  }
+		.txtMarquee-left .bd{ padding:10px; }
+		.txtMarquee-left .bd .tempWrap{ width:425px !important; }/* 用 !important覆盖SuperSlide自动生成的宽度，这样就可以手动控制可视宽度。 */
+		.txtMarquee-left .bd ul{ overflow:hidden; zoom:1; }
+		.txtMarquee-left .bd ul li{ margin-right:20px;  float:left; height:24px; line-height:24px;  text-align:left; _display:inline; width:auto !important;  }/* 用 width:auto !important 覆盖SuperSlide自动生成的宽度，解决文字不衔接问题 */
+
+
+		.txtMarquee-left .bd ul li span{ color:#999;  }
+		</style>
+
+		<div class="txtMarquee-left">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
+				</ul>
+			</div>
+		</div>
+
+		<script type="text/javascript">
+		jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:2,interTime:50});
+		</script>
+
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/T1.1-multipleLine.html

@@ -0,0 +1,163 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,SuperSlide多行滚动,jQuery多行滚动,javascript多行滚动">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 多行滚动示例</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+
+		/* 本例子css */
+		.multipleLine{ overflow:hidden; position:relative; width:450px;  border:1px solid #ccc;   }
+		.multipleLine .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.multipleLine .hd .prev,.multipleLine .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("images/icoUp.gif") no-repeat;}
+		.multipleLine .hd .next{ background:url("images/icoDown.gif") no-repeat;  }
+		.multipleLine .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.multipleLine .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.multipleLine .hd ul li.on{ background-position:0 0; }
+		.multipleLine .bd{ padding:10px; height:240px; overflow:hidden;  }
+		.multipleLine .bd ul{ overflow:hidden; zoom:1; margin-bottom:10px;  }
+		.multipleLine .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.multipleLine .bd ul li .pic{ text-align:center; }
+		.multipleLine .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.multipleLine .bd ul li .pic a:hover img{ border-color:#999;  }
+		.multipleLine .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="multipleLine" style="margin:0 auto">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+
+				<div class="ulWrap">
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+						</ul>
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+						</ul>
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+						</ul>
+				</div><!-- ulWrap End -->
+			</div><!-- bd End -->
+		</div><!-- multipleLine End -->
+
+		<script type="text/javascript">
+			/*
+				多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li
+			*/
+			jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});
+		</script>
+
+	<div class="js">
+		<p>多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li</p>
+		<textarea>本例js调用：jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/T1.2-multipleColumn.html

@@ -0,0 +1,156 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,SuperSlide多列滚动,jQuery多列滚动,javascript多列滚动">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 多列滚动示例</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+
+		/* 本例子css */
+		.multipleColumn{ overflow:hidden; position:relative; width:870px;  border:1px solid #ccc;   }
+		.multipleColumn .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.multipleColumn .hd .prev,.multipleColumn .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("images/icoLeft.gif") no-repeat;}
+		.multipleColumn .hd .next{ background:url("images/icoRight.gif") no-repeat;  }
+		.multipleColumn .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.multipleColumn .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
+		.multipleColumn .hd ul li.on{ background-position:0 0; }
+
+		.multipleColumn .bd{ padding:10px; overflow:hidden;  }
+		.multipleColumn .bd ul{ overflow:hidden; zoom:1; width:284px;  float:left; _display:inline;  }
+		.multipleColumn .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.multipleColumn .bd ul li .pic{ text-align:center; }
+		.multipleColumn .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.multipleColumn .bd ul li .pic a:hover img{ border-color:#999;  }
+		.multipleColumn .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="multipleColumn" style="margin:0 auto">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+
+				<div class="ulWrap">
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+							</li>
+						</ul>
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+							</li>
+						</ul>
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+							</li>
+						</ul>
+
+						<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+							</li>
+						</ul>
+
+				</div><!-- ulWrap End -->
+			</div><!-- bd End -->
+		</div><!-- multipleColumn End -->
+
+		<script type="text/javascript">
+			/*
+				多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li
+			*/
+			jQuery(".multipleColumn").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3});
+		</script>
+
+	<div class="js">
+		<p>多行/多列的滚动解决思路在于：把每次滚动的n个li放到1个ul里面，然后用SuperSlide每次滚动1个ul，相当于每次滚动n个li</p>
+		<textarea>本例js调用：jQuery(".multipleColumn").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3});</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/T1.3-targetCell.html

@@ -0,0 +1,81 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,targetCell基础示例">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - targetCell基础示例</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+
+		/* 本例子css */
+		.sideMen{ width:400px; border:1px solid #ddd;  }
+		.sideMen h3{ height:32px; line-height:32px; padding-left:10px;  border-top:1px solid #e3e3e3; background:#f4f4f4;
+			font:normal 14px/32px "Microsoft YaHei";
+		}
+		.sideMen h3 em{ float:right; display:block; width:40px; height:32px;   background:url(images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
+		.sideMen h3 em.on{ background-position:16px -57px; }
+		.sideMen ul{ padding:8px 25px; color:#999;  }
+
+		</style>
+
+		<div class="sideMen" style="margin:0 auto">
+			<h3><em></em>书签切换系列</h3>
+			<ul>
+				<li>淘宝首页右侧公告</li>
+				<li>京东首页产品切换</li>
+				<li>苏宁易购首页品牌切换</li>
+				<li>1号店双重切换</li>
+				<li>腾讯健康频道切换</li>
+			</ul>
+			<h3><em></em>幻灯片/焦点图系列</h3>
+			<ul>
+				<li>淘宝首页焦点图</li>
+				<li>腾讯娱乐频道焦点图</li>
+				<li>腾讯电影频道焦点图</li>
+				<li>网易游戏频道焦点图</li>
+				<li>易迅首页焦点图</li>
+			</ul>
+			<h3><em></em>带按钮切换</h3>
+			<ul>
+				<li>淘宝首页今日活动</li>
+				<li>豆瓣读书频道</li>
+				<li>天猫首页品牌切换</li>
+				<li>格瓦拉首页活动进行中</li>
+				<li>腾讯博客图片滚动</li>
+			</ul>
+
+		</div><!-- sideMen End -->
+
+		<script type="text/javascript">
+			jQuery(".sideMen").slide({titCell:"h3 em",targetCell:"ul",trigger:"click"});
+		</script>
+
+	<div class="js">
+		<p>本例js调用：</p>
+		<textarea>jQuery(".sideMen").slide({titCell:"h3 em",targetCell:"ul",trigger:"click"});</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/T1.4-SuperSlideGroup.html

@@ -0,0 +1,166 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,SuperSlide组合应用基础示例">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - SuperSlide组合应用基础示例</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+		/* 本例子css */
+		.slideGroup{ width:510px; border:1px solid #ddd; text-align:left;  }
+		.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative;  }
+		.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
+		.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+		.slideGroup .parHd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+		.slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative;   }
+
+		.slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
+		.slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4;  }
+		.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60;  }
+
+		.slideGroup .parBd ul{ overflow:hidden; zoom:1;   }
+		.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.slideGroup .parBd ul li .pic{ text-align:center; }
+		.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.slideGroup .parBd ul li .pic a:hover img{ border-color:#999;  }
+		.slideGroup .parBd ul li .title{ line-height:24px;   }
+
+
+		</style>
+
+
+		<div class="slideGroup" style="margin:0 auto">
+			<div class="parHd">
+				<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+			</div>
+			<div class="parBd">
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+			</div><!-- parBd End -->
+		</div>
+
+		<script type="text/javascript">
+			/*
+			SuperSlide组合注意：
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用
+			*/
+
+			/* 内层图片滚动切换 */
+			jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});
+
+			/* 外层tab切换 */
+			jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
+
+		</script>
+
+	<div class="js">
+		<p>SuperSlide组合注意：</br>
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；</br>
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用</p>
+		<textarea>本例js调用：
+/* 内层图片滚动切换 */
+jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});
+
+/* 外层tab切换 */
+jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
+		</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/T1.5-onePage.html

@@ -0,0 +1,178 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide-同一页面使用多个效果">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide-同一页面使用多个效果</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+
+
+</head>
+
+<style type="text/css">
+	/* css 重置 */
+	*{margin:0; padding:0; list-style:none; }
+	body{ background:#fff; font:normal 12px/22px 宋体; padding:20px;  }
+	img{ border:0;  }
+	a{ text-decoration:none; color:#333;  }
+	a:hover{ color:#1974A1;  }
+	.js{width:90%; margin:10px auto 0 auto; }
+	.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+	.js p span{ float:right; }
+	.js p span a{ color:#f00; text-decoration:underline;   }
+	.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+	h1{ font:normal 20px/200% "Microsoft YaHei"; _font-weight:bold; padding-bottom:10px;  }
+	h2{ font:normal 14px/200% "Microsoft YaHei"; _font-weight:bold; padding-bottom:10px; color:#c00;  }
+
+	/* 本例子css */
+
+	/* 焦点图效果 */
+	.picBtnTop{ width:500px; height:214px; border:1px solid #ccc; padding:5px;  position:relative;  overflow:hidden;  zoom:1;   }
+	.picBtnTop .hd{ width:98px;  height:214px; position:absolute; right:5px; overflow:hidden; }
+	.picBtnTop .hd ul li{ width:93px; text-align:center; padding:0 0 5px 5px;  }
+	.picBtnTop .hd ul li img{ width:85px; height:60px; border:4px solid #ddd; cursor:pointer; vertical-align:bottom; }
+	.picBtnTop .hd ul li.on{ background:url("images/icoleft.gif") no-repeat 0 28px; }
+	.picBtnTop .hd ul li.on img{ border-color:#f60;  }
+	.picBtnTop .bd{ width:400px;  height:214px; position:relative;  }
+	.picBtnTop .bd li{ position:relative; zoom:1; vertical-align:middle;}
+	.picBtnTop .bd li .pic{ position:relative; z-index:0;  }
+	.picBtnTop .bd li .pic img{ width:400px; height:214px; vertical-align:bottom; }
+	.picBtnTop .bd li .bg{ width:400px; height:30px; position:absolute; left:0; bottom:0; z-index:1;  background:#000; filter:alpha(opacity=60);opacity:0.6;    }
+	.picBtnTop .bd li .title{ width:400px; height:30px; line-height:30px; left:0; bottom:0;   position:absolute; z-index:2;  }
+	.picBtnTop .bd li .title a{ color:#fff; padding-left:15px;  }
+	#demo1,#demo2{ margin-bottom:20px;  }
+
+	/* tab选项切换效果 */
+	.slideTxtBox{ width:510px; border:1px solid #ddd; text-align:left;  }
+	.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative;  }
+	.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
+	.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+	.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+	.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
+	.slideTxtBox .bd li{ height:24px; line-height:24px;   }
+	.slideTxtBox .bd li .date{ float:right; color:#999;  }
+
+</style>
+
+
+<body>
+
+
+<h1>下面3个示例演示了如何在同一个页面使用多个SuperSlide效果</h1>
+
+
+<h2>下面2个示例，演示如何在同一页面使用多个相同效果</h2>
+
+<!--  同一效果多次调用，你只需要各自指定一个不重复的ID，然后根据需要设置参数即可 -->
+<!-- 不同id=demo1  相同class="picBtnTop" -->
+<div id="demo1" class="picBtnTop">
+	<div class="hd">
+		<ul>
+			<li><img src="images/pic1.jpg" /></li>
+			<li><img src="images/pic2.jpg" /></li>
+			<li><img src="images/pic3.jpg" /></li>
+		</ul>
+	</div>
+	<div class="bd">
+		<ul>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic1.jpg" /></a></div>
+				<div class="title"><a href="">效果图1</a></div>
+			</li>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic2.jpg" /></a></div>
+				<div class="title"><a href="">效果图2</a></div>
+			</li>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic3.jpg" /></a></div>
+				<div class="title"><a href="">效果图3</a></div>
+			</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+//唯一不同：jQuery("#demo1")
+jQuery("#demo1").slide({ mainCell:".bd ul",effect:"top",autoPlay:true,triggerTime:0 });</script>
+
+
+<!-- 不同id=demo2  相同class="picBtnTop" -->
+<div id="demo2" class="picBtnTop">
+	<div class="hd">
+		<ul>
+			<li><img src="images/pic1.jpg" /></li>
+			<li><img src="images/pic2.jpg" /></li>
+			<li><img src="images/pic3.jpg" /></li>
+		</ul>
+	</div>
+	<div class="bd">
+		<ul>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic1.jpg" /></a></div>
+				<div class="title"><a href="">效果图1</a></div>
+			</li>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic2.jpg" /></a></div>
+				<div class="title"><a href="">效果图2</a></div>
+			</li>
+			<li>
+				<div class="bg"></div>
+				<div class="pic"><a href=""><img src="images/pic3.jpg" /></a></div>
+				<div class="title"><a href="">效果图3</a></div>
+			</li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">
+//唯一不同：jQuery("#demo2")
+jQuery("#demo2").slide({ mainCell:".bd ul",effect:"top",autoPlay:true,triggerTime:0 });</script>
+
+
+<h2>下面1个示例，演示如何在同一页面使用其它效果</h2>
+<div class="slideTxtBox">
+	<div class="hd">
+		<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+	</div>
+	<div class="bd">
+		<ul>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+		</ul>
+		<ul>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+		</ul>
+		<ul>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+		</ul>
+	</div>
+</div>
+<script type="text/javascript">jQuery(".slideTxtBox").slide();</script>
+
+
+
+
+</body>
+</html>

src/main/webapp/static/SuperSlide/demo/T1.6-doubleTab.html

@@ -0,0 +1,196 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,双重Tab（slide组合）">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 双重Tab（slide组合）</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+		/* 本例子css */
+		.outBox{ width:450px; border:1px solid #ddd; text-align:left;  }
+		.outBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative;  }
+		.outBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
+		.outBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+		.outBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+		
+		.inBox{ padding:15px 15px 0 15px;  }
+		.inBox .inHd{ height:24px; line-height:24px; border-bottom:1px solid #ccc; padding:0 10px;   }
+		.inBox .inHd ul{ overflow:hidden; zoom:1; }
+		.inBox .inHd ul li{ height:24px; width:60px; text-align:center; float:left; cursor:pointer;  }
+		.inBox .inHd ul li.on{ background:#ccc; color:#fff;  }
+		.inBox .inBd ul{ padding:15px;  zoom:1; overflow:hidden;   }
+		.inBox .inBd li{ height:24px; line-height:24px; overflow:hidden; zoom:1;  }
+		.inBox .inBd li .date{ float:right; color:#999;  }
+
+		</style>
+
+
+		<div class="outBox" style="margin:0 auto">
+			<div class="hd">
+				<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+			</div>
+			<div class="bd">
+
+					<!-- inBox S -->
+					<div class="inBox">
+						<div class="inHd">
+							<ul><li>栏目一</li><li>栏目二</li><li>栏目三</li></ul>
+						</div>
+						<div class="inBd">
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+								</ul>
+						</div>
+					</div>
+					
+					<!-- inBox S -->
+					<div class="inBox">
+						<div class="inHd">
+							<ul><li>栏目三</li><li>栏目四</li><li>栏目五</li></ul>
+						</div>
+						<div class="inBd">
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+								</ul>
+						</div>
+					</div>
+					
+					<!-- inBox S -->
+					<div class="inBox">
+						<div class="inHd">
+							<ul><li>栏目六</li><li>栏目七</li><li>栏目八</li></ul>
+						</div>
+						<div class="inBd">
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+								</ul>
+								<ul>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+									<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+								</ul>
+						</div>
+					</div>
+					
+
+			</div><!-- bd E -->
+		</div>
+		<script type="text/javascript">
+			/*
+			SuperSlide组合注意：
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用
+			*/
+
+			/* 内层inBox渐显切换，注意titCell、mainCell等不能与外层相同 */
+			jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd" });
+			/* 外层outBox左滚动切换 */
+			jQuery(".outBox").slide({ effect:"left" });
+		</script>
+
+		<div class="js">
+		<p>SuperSlide组合注意：</br>
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；</br>
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用</p>
+			<textarea>
+/* 内层inBox渐显切换，注意titCell、mainCell等不能与外层相同 */
+jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd" });
+/* 外层outBox左滚动切换 */
+jQuery(".outBox").slide({ effect:"left" });
+			</textarea>
+		</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>
+

src/main/webapp/static/SuperSlide/demo/T1.7-TabMarquee.html

@@ -0,0 +1,166 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,Tab+无缝滚动（slide组合）">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - Tab+无缝滚动（slide组合）</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+		/* 本例子css */
+		.slideGroup{ width:510px; border:1px solid #ddd; text-align:left;  }
+		.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative;  }
+		.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
+		.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+		.slideGroup .parHd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+		.slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative;   }
+
+		.slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
+		.slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4;  }
+		.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60;  }
+
+		.slideGroup .parBd ul{ overflow:hidden; zoom:1;   }
+		.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.slideGroup .parBd ul li .pic{ text-align:center; }
+		.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.slideGroup .parBd ul li .pic a:hover img{ border-color:#999;  }
+		.slideGroup .parBd ul li .title{ line-height:24px;   }
+
+
+		</style>
+
+
+		<div class="slideGroup" style="margin:0 auto">
+			<div class="parHd">
+				<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+			</div>
+			<div class="parBd">
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+					<div class="slideBox">
+						<a class="sPrev" href="javascript:void(0)"></a>
+						<ul>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.1</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.2</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.3</a></div>
+							</li>
+							<li>
+								<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
+								<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.4</a></div>
+							</li>
+						</ul>
+						<a class="sNext" href="javascript:void(0)"></a>
+					</div><!-- slideBox End -->
+
+			</div><!-- parBd End -->
+		</div>
+
+		<script type="text/javascript">
+			/*
+			SuperSlide组合注意：
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用
+			*/
+
+			/* 内层图片无缝滚动 */
+			jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftMarquee",interTime:50,autoPlay:true,trigger:"click"});
+
+			/* 外层tab切换 */
+			jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
+
+		</script>
+
+	<div class="js">
+		<p>SuperSlide组合注意：</br>
+			1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；</br>
+			2、注意书写顺序，通常先写内层js调用，再写外层js调用</p>
+		<textarea>本例js调用：
+/* 内层图片无缝滚动 */
+jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftMarquee",interTime:50,autoPlay:true,trigger:"click"});
+
+/* 外层tab切换 */
+jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
+		</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/T1.8-picFocus.html

@@ -0,0 +1,79 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,图片导航焦点图">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片导航焦点图</title>
+<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+		/* 本例子css */
+		.picFocus{ margin:0 auto;  width:467px; border:1px solid #ccc; padding:5px;  position:relative;  overflow:hidden;  zoom:1;   }
+		.picFocus .hd{ width:100%; padding-top:5px;  overflow:hidden; }
+		.picFocus .hd ul{ margin-right:-5px;  overflow:hidden; zoom:1; }
+		.picFocus .hd ul li{ padding-top:5px; float:left;  text-align:center;  }
+		.picFocus .hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer; margin-right:5px;   }
+		.picFocus .hd ul li.on{ background:url("images/icoUp.gif") no-repeat center 0; }
+		.picFocus .hd ul li.on img{ border-color:#f60;  }
+		.picFocus .bd li{ vertical-align:middle; }
+		.picFocus .bd img{ width:467px; height:230px; display:block;  }
+
+		</style>
+
+		<div class="picFocus">
+			<div class="bd">
+				<ul>
+					<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic1.jpg" /></a></li>
+					<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic2.jpg" /></a></li>
+					<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic3.jpg" /></a></li>
+					<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic4.jpg" /></a></li>
+				</ul>
+			</div>
+
+			<div class="hd">
+				<ul>
+					<li><img src="images/pic1.jpg" /></li>
+					<li><img src="images/pic2.jpg" /></li>
+					<li><img src="images/pic3.jpg" /></li>
+					<li><img src="images/pic4.jpg" /></li>
+				</ul>
+			</div>
+
+		</div>
+		<script type="text/javascript">jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</script>
+
+
+
+	<div class="js">
+		<p>js调用：</p>
+		<textarea>jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</textarea>
+	</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/1.0-switchTab-iframe.html

@@ -0,0 +1,98 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery标签切换效果,Tab切换效果">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - Tab切换效果</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
+		.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px;   border-bottom:1px solid #ddd;  position:relative; }
+		.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
+		.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
+		.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
+		.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
+		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
+		.slideTxtBox .bd li .date{ float:right; color:#999;  }
+
+		/* 下面是前/后按钮代码，如果不需要删除即可 */
+		.slideTxtBox .arrow{  position:absolute; right:10px; top:0; }
+		.slideTxtBox .arrow a{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat; }
+		.slideTxtBox .arrow .next{ background-position:0 -50px;  }
+		.slideTxtBox .arrow .prevStop{ background-position:-60px 0; }
+		.slideTxtBox .arrow .nextStop{ background-position:-60px -50px; }
+
+		</style>
+
+
+		<div class="slideTxtBox">
+			<div class="hd">
+
+				<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
+				<span class="arrow"><a class="next"></a><a class="prev"></a></span>
+
+				<ul><li>教育</li><li>培训</li><li>出国</li></ul>
+			</div>
+			<div class="bd">
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
+				</ul>
+				<ul>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".slideTxtBox").slide( { effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],pnLoop:ary[6] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/10.0-txtMarquee-top-iframe.html

@@ -0,0 +1,72 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字无缝滚动特效-上</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.txtMarquee-top{ overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.txtMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.txtMarquee-top .hd .next{ background-position:0 -140px;  }
+		.txtMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
+		.txtMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
+		.txtMarquee-top .bd{ padding:15px;  }
+		.txtMarquee-top .infoList li{ height:24px; line-height:24px;   }
+		.txtMarquee-top .infoList li .date{ float:right; color:#999;  }
+
+		</style>
+
+
+		<div class="txtMarquee-top">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".txtMarquee-top").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7]  });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/11.0-nav-iframe.html

@@ -0,0 +1,106 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 导航效果</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
+		.nav{ padding:0 20px; height:34px; line-height:34px; background:#39A4DC;  position:relative; z-index:1;  }
+		.nav a{ color:#fff;  }
+		.nav .nLi{ float:left;  position:relative; display:inline;  }
+		.nav .nLi h3{ float:left;  }
+		.nav .nLi h3 a{ display:block; padding:0 20px; font-size:14px; font-weight:bold;  }
+		.nav .sub{ display:none; width:100px; left:0; top:34px;  position:absolute; background:#4E4E4E;  line-height:26px; padding:5px 0;  }
+		.nav .sub li{ zoom:1; }
+		.nav .sub a{ display:block; padding:0 10px; }
+		.nav .sub a:hover{ background:#6d6d6d; color:#fff;  }
+		.nav .on h3 a{ background:#4E4E4E; color:#fff;   }
+		</style>
+
+
+		<ul id="nav" class="nav clearfix">
+			<li class="nLi">
+				<h3><a href="http://www.SuperSlide2.com" target="_blank">首页</a></h3>
+			</li>
+			<li class="nLi">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">新闻</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">预告片</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi ">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">影评</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+			<li class="nLi">
+					<h3><a href="http://www.SuperSlide2.com" target="_blank">资料库</a></h3>
+					<ul class="sub">
+						<li><a href="#">新闻首页</a></li>
+						<li><a href="#">新闻人物</a></li>
+						<li><a href="#">新闻电视</a></li>
+						<li><a href="#">新闻图片</a></li>
+						<li><a href="#">新闻视频</a></li>
+						<li><a href="# ">新闻专题</a></li>
+					</ul>
+			</li>
+		</ul>
+
+
+		<div class="intro" style="padding:10px">
+			假设当前频道为“预告片”，</br>
+			手动或后台程序添加titOnClassName类名（默认是'on'），相当于设置参数defaultIndex:2。</br>
+			若同时设置参数returnDefault:true，则鼠标移走后返回当前频道。
+		</div>
+
+		<script id="jsID" type="text/javascript">
+			 var ary = location.href.split("&");
+			jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub",effect:ary[1], delayTime:ary[2] , triggerTime:ary[3], defaultPlay:ary[4],returnDefault:ary[5],easing:ary[6] });
+		</script>
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/12.0-sideMenu-iframe.html

@@ -0,0 +1,77 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,targetCell基础示例">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - targetCell基础示例</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		.js{width:90%; margin:10px auto 0 auto; }
+		.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
+		.js p span{ float:right; }
+		.js p span a{ color:#f00; text-decoration:underline;   }
+		.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }
+
+
+		/* 本例子css */
+		.sideMenu{ border:1px solid #ddd;  }
+		.sideMenu h3{ height:32px; line-height:32px; padding-left:10px;  border-top:1px solid #e3e3e3; background:#f4f4f4; cursor:pointer;
+			font:normal 14px/32px "Microsoft YaHei";
+		}
+		.sideMenu h3 em{ float:right; display:block; width:40px; height:32px;   background:url(../images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
+		.sideMenu h3.on em{ background-position:16px -57px; }
+		.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }
+
+		</style>
+
+		<div class="sideMenu" style="margin:0 auto">
+			<h3><em></em>书签切换系列</h3>
+			<ul>
+				<li>淘宝首页右侧公告</li>
+				<li>京东首页产品切换</li>
+				<li>苏宁易购首页品牌切换</li>
+				<li>1号店双重切换</li>
+				<li>腾讯健康频道切换</li>
+			</ul>
+			<h3><em></em>幻灯片/焦点图系列</h3>
+			<ul>
+				<li>淘宝首页焦点图</li>
+				<li>腾讯娱乐频道焦点图</li>
+				<li>腾讯电影频道焦点图</li>
+				<li>网易游戏频道焦点图</li>
+				<li>易迅首页焦点图</li>
+			</ul>
+			<h3><em></em>带按钮切换</h3>
+			<ul>
+				<li>淘宝首页今日活动</li>
+				<li>豆瓣读书频道</li>
+				<li>天猫首页品牌切换</li>
+				<li>格瓦拉首页活动进行中</li>
+				<li>腾讯博客图片滚动</li>
+			</ul>
+
+		</div><!-- sideMenu End -->
+
+		<script type="text/javascript">
+			var ary = location.href.split("&");
+			jQuery(".sideMenu").slide({ titCell:"h3", targetCell:"ul", effect:ary[1], delayTime:ary[2] , trigger:ary[3], triggerTime:ary[4], defaultPlay:ary[5], returnDefault:ary[6],easing:ary[7] });
+		</script>
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/2.0-focus-iframe.html

@@ -0,0 +1,75 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery焦点图/幻灯片">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 焦点图/幻灯片</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		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:1; }
+		.slideBox .hd ul{ overflow:hidden; zoom:1; 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:0;   }
+		.slideBox .bd li{ zoom:1; 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:1;  }
+		.slideBox .prevStop{ display:none;  }
+		.slideBox .nextStop{ display:none;  }
+
+		</style>
+
+		<div id="slideBox" class="slideBox">
+			<div class="hd">
+				<ul><li>1</li><li>2</li><li>3</li></ul>
+			</div>
+			<div class="bd">
+				<ul>
+					<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></li>
+					<li><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>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/3.0-picScroll-left-iframe.html

@@ -0,0 +1,94 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片滚动特效-左</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picScroll-left{ overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat;}
+		.picScroll-left .hd .next{ background-position:0 -50px;  }
+		.picScroll-left .hd .prevStop{ background-position:-60px 0; }
+		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
+		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
+		.picScroll-left .hd ul li.on{ background-position:0 0; }
+		.picScroll-left .bd{ padding:10px;   }
+		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
+		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.picScroll-left .bd ul li .pic{ text-align:center; }
+		.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picScroll-left .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picScroll-left">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".picScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/4.0-picScroll-top-iframe.html

@@ -0,0 +1,94 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片上滚动特效-上</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picScroll-top{ margin:0 auto;  width:210px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picScroll-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picScroll-top .hd .prev,.picScroll-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.picScroll-top .hd .next{ background-position:0 -140px;  }
+		.picScroll-top .hd .prevStop{ background-position:-60px -100px;  }
+		.picScroll-top .hd .nextStop{ background-position:-60px -140px;  }
+		.picScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
+		.picScroll-top .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
+		.picScroll-top .hd ul li.on{ background-position:0 0; }
+		.picScroll-top .bd{ padding:10px;   }
+		.picScroll-top .bd ul{ overflow:hidden; zoom:1; }
+		.picScroll-top .bd ul li{ text-align:center; zoom:1; }
+		.picScroll-top .bd ul li .pic{ text-align:center; }
+		.picScroll-top .bd ul li .pic img{ width:180px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
+		.picScroll-top .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picScroll-top .bd ul li .title{ line-height:24px; }
+
+		</style>
+
+		<div class="picScroll-top">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".picScroll-top").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/5.0-picMarquee-left-iframe.html

@@ -0,0 +1,90 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片无缝滚动特效-左</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picMarquee-left{ overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picMarquee-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") no-repeat;}
+		.picMarquee-left .hd .next{ background-position:0 -50px;  }
+		.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
+		.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }
+
+		.picMarquee-left .bd{ padding:10px;   }
+		.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
+		.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
+		.picMarquee-left .bd ul li .pic{ text-align:center; }
+		.picMarquee-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
+		.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picMarquee-left .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picMarquee-left">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".picMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/6.0-picMarquee-top-iframe.html

@@ -0,0 +1,89 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 图片无缝滚动特效-上</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+
+		/* 本例子css */
+		.picMarquee-top{ margin:0 auto;  width:210px; overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.picMarquee-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.picMarquee-top .hd .prev,.picMarquee-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.picMarquee-top .hd .next{ background-position:0 -140px;  }
+		.picMarquee-top .hd .prevStop{ background-position:-60px -100px;  }
+		.picMarquee-top .hd .nextStop{ background-position:-60px -140px;  }
+		.picMarquee-top .bd{ padding:10px;   }
+		.picMarquee-top .bd ul{ overflow:hidden; zoom:1; }
+		.picMarquee-top .bd ul li{ text-align:center; zoom:1; }
+		.picMarquee-top .bd ul li .pic{ text-align:center; }
+		.picMarquee-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
+		.picMarquee-top .bd ul li .pic a:hover img{ border-color:#999;  }
+		.picMarquee-top .bd ul li .title{ line-height:24px;   }
+
+		</style>
+
+		<div class="picMarquee-top">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="picList">
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
+					</li>
+					<li>
+						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
+						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
+					</li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".picMarquee-top").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4] ,pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/7.0-txtScroll-left-iframe.html

@@ -0,0 +1,72 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字滚动特效-左</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+		/* 本例子css */
+		.txtScroll-left{ position:relative;  border:1px solid #ccc;   }
+		.txtScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden; cursor:pointer; background:url("../images/arrow.png") no-repeat;}
+		.txtScroll-left .hd .next{ background-position:0 -50px;  }
+		.txtScroll-left .hd .prevStop{ background-position:-60px 0; }
+		.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }
+		.txtScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px;  }
+		.txtScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
+		.txtScroll-left .hd ul li.on{ background-position:0 0; }
+		.txtScroll-left .bd{ padding:10px; width:430px; overflow:hidden;    }
+		.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
+		.txtScroll-left .bd ul li{ margin-right:20px;  float:left; height:24px; line-height:24px;  text-align:left; _display:inline;}
+		.txtScroll-left .bd ul li span{ color:#999;  }
+		</style>
+
+		<div class="txtScroll-left">
+			<div class="hd">
+				<a class="next"></a>
+				<ul class="num"><li>1</li><li>2</li><li>3</li></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".txtScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/8.0-txtScroll-top-iframe.html

@@ -0,0 +1,77 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字滚动特效-上</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+
+		/* 本例子css */
+		.txtScroll-top{ overflow:hidden; position:relative;  border:1px solid #ccc;   }
+		.txtScroll-top .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtScroll-top .hd .prev,.txtScroll-top .hd .next{ display:block;  width:9px; height:5px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
+			 cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
+		.txtScroll-top .hd .next{ background-position:0 -140px;  }
+		.txtScroll-top .hd .prevStop{ background-position:-60px -100px;  }
+		.txtScroll-top .hd .nextStop{ background-position:-60px -140px;  }
+		.txtScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
+		.txtScroll-top .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
+		.txtScroll-top .hd ul li.on{ background-position:0 0; }
+		.txtScroll-top .bd{ padding:15px;  }
+		.txtScroll-top .infoList li{ height:24px; line-height:24px;   }
+		.txtScroll-top .infoList li .date{ float:right; color:#999;  }
+
+		</style>
+
+
+		<div class="txtScroll-top">
+			<div class="hd">
+				<a class="next"></a>
+				<ul></ul>
+				<a class="prev"></a>
+				<span class="pageState"></span>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
+					<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".txtScroll-top").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
+		</script>
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/demo/iframe/9.0-txtMarquee-left-iframe.html

@@ -0,0 +1,71 @@
+<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta http-equiv="Content-Language" content="zh-CN">
+<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
+<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果">
+<title>SuperSlide - 文字无缝滚动特效-左</title>
+<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
+</head>
+
+<body>
+
+
+
+		<style type="text/css">
+		/* css 重置 */
+		*{margin:0; padding:0; list-style:none; }
+		body{ background:#fff; font:normal 12px/22px 宋体;  }
+		img{ border:0;  }
+		a{ text-decoration:none; color:#333;  }
+		a:hover{ color:#1974A1;  }
+
+		/* 本例子css */
+		.txtMarquee-left{ position:relative;  border:1px solid #ccc;   }
+		.txtMarquee-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
+		.txtMarquee-left .hd .prev,.txtMarquee-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden; cursor:pointer; 			 cursor:pointer; background:url("../images/arrow.png") no-repeat;}
+		.txtMarquee-left .hd .next{ background-position:0 -50px;  }
+		.txtMarquee-left .hd .prevStop{ background-position:-60px 0; }
+		.txtMarquee-left .hd .nextStop{ background-position:-60px -50px; }
+		.txtMarquee-left .bd{ padding:10px; }
+		.txtMarquee-left .bd .tempWrap{ width:425px !important; }/* 用 !important覆盖SuperSlide自动生成的宽度，这样就可以手动控制可视宽度。 */
+		.txtMarquee-left .bd ul{ overflow:hidden; zoom:1; }
+		.txtMarquee-left .bd ul li{ margin-right:20px;  float:left; height:24px; line-height:24px;  text-align:left; _display:inline; width:auto !important;  }/* 用 width:auto !important 覆盖SuperSlide自动生成的宽度，解决文字不衔接问题 */
+
+
+		.txtMarquee-left .bd ul li span{ color:#999;  }
+		</style>
+
+		<div class="txtMarquee-left">
+			<div class="hd">
+				<a class="next"></a>
+				<a class="prev"></a>
+			</div>
+			<div class="bd">
+				<ul class="infoList">
+					<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
+					<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
+				</ul>
+			</div>
+		</div>
+
+		<script id="jsID" type="text/javascript">
+		 var ary = location.href.split("&");
+		jQuery(".txtMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7]  });
+		</script>
+
+
+
+
+</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>
+

src/main/webapp/static/SuperSlide/jquery.SuperSlide.2.1.source.js

@@ -0,0 +1,453 @@
+/*!
+ * SuperSlide v2.1 
+ * 轻松解决网站大部分特效展示问题
+ * 详尽信息请看官网：http://www.SuperSlide2.com/
+ *
+ * Copyright 2011-2013, 大话主席
+ *
+ * 请尊重原创，保留头部版权
+ * 在保留版权的前提下可应用于个人或商业用途
+
+ */
+
+(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 = defaultIndex = onIndex==-1?index:onIndex;
+
+
+			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;}
+});

src/main/webapp/static/SuperSlide/param.html

@@ -0,0 +1,299 @@
+<!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>
+
+<!-- header S -->
+<div id="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" class="paramPage">
+		<ul class="notice">
+			<li class="all on">全部参数</li><li class="need">必须理解参数[新手]</li>
+		</ul>
+
+		<table class="param" border="0" cellspacing="0" cellpadding="0">
+		  <tr class="imp">
+		    <th width="100">参数</th>
+			<th width="90">版本</th>
+		    <th width="80">默认值</th>
+			<th>说明</th>
+			<th width="40">详细</th>
+		  </tr>
+
+		  <tr>
+		    <td class="t">type</td>
+			<td class="t">2.1</td>
+			<td class="t">slide</td>
+		    <td class="intro">效果类型，可选"slide"||"menu"，引入type:"menu"专门处理菜单/导航效果</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr>
+		    <td class="t">defaultPlay</td>
+			<td class="t">2.1</td>
+			<td class="t">true</td>
+		    <td class="intro">默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr>
+		    <td class="t">returnDefault</td>
+			<td class="t">2.1</td>
+			<td class="t">false</td>
+		    <td class="intro">鼠标移出容器，是否返回默认状态，常用于导航/菜单</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr>
+		    <td class="t">mouseOverStop</td>
+			<td class="t">2.1</td>
+			<td class="t">true</td>
+		    <td class="intro">鼠标移到容器层（无缝滚动是mainCell）是否停止播放</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr>
+		    <td class="t">playStateCell</td>
+			<td class="t">2.1</td>
+			<td class="t">".playState"</td>
+		    <td class="intro">播放/暂停状态按钮，点击后会增加/删除"pauseState"类名用于控制样色。可参考 <a target="_blank" href="http://www.superslide2.com/otherDemo.html#effect2">[2.22-真·全屏焦点图]</a></td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr>
+		    <td class="t">switchLoad</td>
+			<td class="t">2.0 &gt; 2.1</td>
+			<td class="t">null</td>
+		    <td class="intro">内容切换加载，暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如switchLoad:"_src"<br/>
+				[v2.1] 修复当scroll>1时，switchLoad无效的bug。
+			</td>
+			<td class="t"><a class="link" target="_blank" href="http://www.superslide2.com/otherDemo/T2.5/switchLoad.html">详解</a></td>
+		  </tr>
+		  <tr>
+		    <td class="t">easing</td>
+			<td class="t">2.0 &gt; 2.1</td>
+			<td class="t">"swing"</td>
+		    <td class="intro">缓动效果；</br>[v2.1]更改默认效果为“swing”，使效果更流畅</td>
+			<td class="t"><a class="link" target="_blank" href="http://www.superslide2.com/otherDemo/T2.1/easing.html">所有</a></td>
+		  </tr>
+		  <tr>
+		    <td class="t">startFun</td>
+			<td class="t">2.0 &gt; 2.1</td>
+			<td class="t">null</td>
+		    <td class="intro">每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 satrtFun:function(i,c){ }； 其中i为当前分页，c为总页数<br/>
+				[v2.1]增加传递参数，startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，这样简写就方便了。</br>
+				例如 jQuery(".slideBox").slide({ startFun:function( i,c,s ){ s.show() } }); 这里的 s.show() 相当于 jQuery(".slideBox").show() 
+			</td>
+			<td class="t"><a class="link" target="_blank" href="http://www.superslide2.com/otherDemo/T2.2/funIntro.html">详解</a></td>
+		  </tr>
+		  <tr>
+		    <td class="t">endFun</td>
+			<td class="t">2.0 &gt; 2.1</td>
+			<td class="t">null</td>
+		    <td class="intro">每次切换效果结束时执行函数，用法和startFun一致<br/>
+			</td>
+			<td class="t"><a class="link" target="_blank" href="http://www.superslide2.com/otherDemo/T2.2/funIntro.html">详解</a></td>
+		  </tr>
+		  <tr>
+		    <td class="t">triggerTime</td>
+			<td class="t">2.0</td>
+			<td class="t">150</td>
+		    <td class="intro">毫秒，titCell触发时间，默认150毫秒延迟，以防重复执行效果。若为0即鼠标移过titCell立刻执行效果</td>
+			<td class="t"></td>
+		  </tr>
+		  <tr>
+		    <td class="t">targetCell</td>
+			<td class="t">2.0 &gt; 2.1</td>
+			<td class="t">null</td>
+		    <td class="intro">切换元素对象，处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和titCell、mainCell同时使用。只支持fade效果。<br/>
+				[v2.1] 增加支持slideDown效果。
+			</td>
+			<td class="t"><a class="link" target="_blank" href="http://www.superslide2.com/otherDemo/T2.3/targetCell.html">详解</a></td>
+		  </tr>
+		  <tr>
+		    <td class="t">pageStateCell</td>
+			<td class="t">2.0</td>
+			<td class="t">".pageState"</td>
+		    <td class="intro">分页状态对象，用于显示分页状态，例如：2/3</td>
+			<td class="t"></td>
+		  </tr>
+		  <tr>
+		    <td class="t">pnLoop</td>
+			<td class="t">2.0</td>
+			<td class="t">true</td>
+		    <td class="intro">前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色</td>
+			<td class="t"></td>
+		  </tr>
+		  <tr>
+		    <td class="t">opp</td>
+			<td class="t">2.0</td>
+			<td class="t">false</td>
+		    <td class="intro">默认反方向运动，例如 effect:"leftMarquee" 然后设置 opp:true，则效果为右滚动。常用于leftMarquee/topMarquee</td>
+			<td class="t"></td>
+		  </tr>
+		  <tr class="imp">
+		    <td class="t"><b>autoPage</b></td>
+		    <td class="t">1.2 &gt; 2.1</td>
+			<td class="t">false</td>
+		    <td class="intro">
+				[v1.2] 程序自动分页，<i>需结合titCell使用，若为true，则titCell为导航元素的包裹层对象。ps：scroll>1时，记得设置autoPage:true，否则分页错误</i>。<br/>
+				[v2.1] 支持自定义分页html，$为数字替换位置。例如autoPage:"&lt;li&gt;&lt;a&gt;$&lt;/a&gt;&lt;/li&gt;"，如果不想输出数字：autoPage:"&lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;"。
+			</td>
+			<td class="t"><a class="link" target="_blank" href="images/autoPage.png">图解</a></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t"><b>titCell</b></td>
+			<td class="t">1.0</td>
+			<td class="t">".hd li"</td>
+		    <td class="intro">导航元素对象（鼠标的触发元素对象）</td>
+			<td class="t"><a class="link" target="_blank" href="images/titCell_mainCell.png">图解</a></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t"><b>mainCell</b></td>
+			<td class="t">1.0</td>
+			<td class="t">".bd"</td>
+		    <td class="intro">切换元素的包裹层对象</td>
+			<td class="t"><a class="link" target="_blank" href="images/titCell_mainCell.png">图解</a></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">effect</td>
+			<td class="t">1.0 > 2.0 >2.1</td>
+			<td class="t">"fade"</td>
+		    <td class="intro">动画效果<br/>
+			[v1.0] fade：渐显； ||   top：上滚动；||   left：左滚动；||  topLoop：上循环滚动；||   leftLoop：左循环滚动；||  topMarquee：上无缝循环滚动；||   leftMarquee：左无缝循环滚动；<br/> 
+			[v2.0] fold：淡入淡出<br/> 
+			[v2.1] slideDown：下拉效果</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">autoPlay</td>
+			<td class="t">1.0</td>
+			<td class="t">false</td>
+		    <td class="intro">自动运行</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">interTime</td>
+			<td class="t">1.0</td>
+			<td class="t">2500</td>
+		    <td class="intro">毫秒；自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">delayTime</td>
+			<td class="t">1.0</td>
+			<td class="t">500</td>
+		    <td class="intro">毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）。</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">trigger</td>
+			<td class="t">1.0</td>
+			<td class="t">"mouseover"</td>
+		    <td class="intro">titCell触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">scroll</td>
+			<td class="t">1.0</td>
+			<td class="t">1</td>
+		    <td class="intro">每次滚动个数。</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="imp">
+		    <td class="t">vis</td>
+			<td class="t">1.0</td>
+			<td class="t">1</td>
+		    <td class="intro">visible缩写，<i>mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。</i></td>
+			<td class="t"><a class="link" target="_blank" href="images/vis.png">图解</a></td>
+		  </tr>
+
+		  <tr class="n">
+		    <td class="t">prevCell</td>
+			<td class="t">1.0</td>
+			<td class="t">".prev"</td>
+		    <td class="intro">前一个/页按钮对象。</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="n">
+		    <td class="t">nextCell</td>
+			<td class="t">1.0</td>
+			<td class="t">".next"</td>
+		    <td class="intro">后一个/页按钮对象。</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="n">
+		    <td class="t">defaultIndex</td>
+			<td class="t">1.0</td>
+			<td class="t">0</td>
+		    <td class="intro">默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从第2个开始执行</td>
+			<td class="t"></td>
+		  </tr>
+
+		  <tr class="n">
+		    <td class="t">titOnClassName</td>
+			<td class="t">1.0</td>
+			<td class="t">"on"</td>
+		    <td class="intro">当前titCell位置自动增加的class名称</td>
+			<td class="t"></td>
+		  </tr>
+		</table>
+
+		<script type="text/javascript">
+
+			$(".param tr").hover(function(){ $(this).addClass("on") },function(){ $(this).removeClass("on") });
+			$(".notice .need").click(function(){
+				$(this).addClass("on").siblings().removeClass("on");
+				$(".param tr:not('.imp')").hide(300);
+			});
+			$(".notice .all").click(function(){
+				$(this).addClass("on").siblings().removeClass("on");
+				$(".param tr:not('.imp')").show(300);
+			});
+
+		</script>
+
+</div>
+<!-- content E -->
+
+
+<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>

src/main/webapp/static/SuperSlide/椹ュ磶锝︹埇锝酱璀忚叮锝笺兓txt

@@ -0,0 +1,25 @@
+/*!
+ * SuperSlide v2.1 
+ * 轻松解决网站大部分特效展示问题
+ * 详尽信息请看官网：http://www.SuperSlide2.com/
+ *
+ * Copyright 2011-2013, 大话主席
+ *
+ * 请尊重原创，保留头部版权
+ * 在保留版权的前提下可应用于个人或商业用途
+ */
+
+
+1、jquery.SuperSlide.2.1.js 为压缩后的文件
+2、jquery.SuperSlide.2.1.source.js 为源代码文件
+3、demo文件内为所有基础效果示例，例如 demo/1.0-switchTab.html 为tab切换基本示例
+4、demo/iframe 文件夹并不是基本示例，请忽略！！
+
+
+如果你购买了扩展效果，还会看到如下文件：
+
+5、otherDemo文件内为所有扩展效果示例
+6、syntaxhighlighter 文件夹为代码着色插件，可以忽略
+
+
+感谢您的支持！

src/main/webapp/static/summernote/summernote-zh-CN.js

@@ -0,0 +1,103 @@
+(function ($) {
+  $.extend($.summernote.lang, {
+    'zh-CN': {
+      font: {
+        bold: '粗体',
+        italic: '斜体',
+        underline: '下划线',
+        strikethrough: '删除线',
+        clear: '清除格式',
+        height: '行高',
+        name: '字体',
+        size: '字号'
+      },
+      image: {
+        image: '图片',
+        insert: '插入图片',
+        resizeFull: '调整至 100%',
+        resizeHalf: '调整至 50%',
+        resizeQuarter: '调整至 25%',
+        floatLeft: '左浮动',
+        floatRight: '右浮动',
+        floatNone: '不浮动',
+        dragImageHere: '将图片拖至此处',
+        selectFromFiles: '从本地上传',
+        url: '图片地址'
+      },
+      link: {
+        link: '链接',
+        insert: '插入链接',
+        unlink: '去除链接',
+        edit: '编辑链接',
+        textToDisplay: '显示文本',
+        url: '链接地址',
+        openInNewWindow: '在新窗口打开'
+      },
+      video: {
+        video: '视频',
+        videoLink: '视频链接',
+        insert: '插入视频',
+        url: '视频地址',
+        providers: '(优酷, Instagram, DailyMotion, Youtube等)'
+      },
+      table: {
+        table: '表格'
+      },
+      hr: {
+        insert: '水平线'
+      },
+      style: {
+        style: '样式',
+        normal: '普通',
+        blockquote: '引用',
+        pre: '代码',
+        h1: '标题 1',
+        h2: '标题 2',
+        h3: '标题 3',
+        h4: '标题 4',
+        h5: '标题 5',
+        h6: '标题 6'
+      },
+      lists: {
+        unordered: '无序列表',
+        ordered: '有序列表'
+      },
+      options: {
+        help: '帮助',
+        fullscreen: '全屏',
+        codeview: '源代码'
+      },
+      paragraph: {
+        paragraph: '段落',
+        outdent: '减少缩进',
+        indent: '增加缩进',
+        left: '左对齐',
+        center: '居中对齐',
+        right: '右对齐',
+        justify: '两端对齐'
+      },
+      color: {
+        recent: '最近使用',
+        more: '更多',
+        background: '背景',
+        foreground: '前景',
+        transparent: '透明',
+        setTransparent: '透明',
+        reset: '重置',
+        resetToDefault: '默认'
+      },
+      shortcut: {
+        shortcuts: '快捷键',
+        close: '关闭',
+        textFormatting: '文本格式',
+        action: '动作',
+        paragraphFormatting: '段落格式',
+        documentStyle: '文档样式'
+      },
+      history: {
+        undo: '撤销',
+        redo: '重做'
+      }
+    }
+  });
+})(jQuery);

src/main/webapp/static/summernote/summernote.css

@@ -0,0 +1,446 @@
+.note-editor {
+    height: 300px;
+}
+
+.note-editor .note-dropzone {
+    position: absolute;
+    z-index: 1;
+    display: none;
+    color: #87cefa;
+    background-color: white;
+    border: 2px dashed #87cefa;
+    opacity: .95;
+    pointer-event: none
+}
+
+.note-editor .note-dropzone .note-dropzone-message {
+    display: table-cell;
+    font-size: 28px;
+    font-weight: bold;
+    text-align: center;
+    vertical-align: middle
+}
+
+.note-editor .note-dropzone.hover {
+    color: #098ddf;
+    border: 2px dashed #098ddf
+}
+
+.note-editor.dragover .note-dropzone {
+    display: table
+}
+
+.note-editor.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1050;
+    width: 100%
+}
+
+.note-editor.fullscreen .note-editable {
+    background-color: white
+}
+
+.note-editor.fullscreen .note-resizebar {
+    display: none
+}
+
+.note-editor.codeview .note-editable {
+    display: none
+}
+
+.note-editor.codeview .note-codable {
+    display: block
+}
+
+.note-editor .note-toolbar {
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-top: 5px;
+    margin: 0;
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #E7EAEC
+}
+
+.note-editor .note-toolbar > .btn-group {
+    margin-top: 5px;
+    margin-right: 5px;
+    margin-left: 0
+}
+
+.note-editor .note-toolbar .note-table .dropdown-menu {
+    min-width: 0;
+    padding: 5px
+}
+
+.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker {
+    font-size: 18px
+}
+
+.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher {
+    position: absolute !important;
+    z-index: 3;
+    width: 10em;
+    height: 10em;
+    cursor: pointer
+}
+
+.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted {
+    position: relative !important;
+    z-index: 1;
+    width: 5em;
+    height: 5em;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
+}
+
+.note-editor .note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted {
+    position: absolute !important;
+    z-index: 2;
+    width: 1em;
+    height: 1em;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
+}
+
+.note-editor .note-toolbar .note-style h1, .note-editor .note-toolbar .note-style h2, .note-editor .note-toolbar .note-style h3, .note-editor .note-toolbar .note-style h4, .note-editor .note-toolbar .note-style h5, .note-editor .note-toolbar .note-style h6, .note-editor .note-toolbar .note-style blockquote {
+    margin: 0
+}
+
+.note-editor .note-toolbar .note-color .dropdown-toggle {
+    width: 20px;
+    padding-left: 5px
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu {
+    min-width: 290px
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu .btn-group {
+    margin: 0
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu .btn-group:first-child {
+    margin: 0 5px
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title {
+    margin: 2px 7px;
+    font-size: 12px;
+    text-align: center;
+    border-bottom: 1px solid #eee
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset {
+    padding: 0 3px;
+    margin: 5px;
+    font-size: 12px;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px
+}
+
+.note-editor .note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover {
+    background: #eee
+}
+
+.note-editor .note-toolbar .note-para .dropdown-menu {
+    min-width: 216px;
+    padding: 5px
+}
+
+.note-editor .note-toolbar .note-para .dropdown-menu > div:first-child {
+    margin-right: 5px
+}
+
+.note-editor .note-statusbar {
+    background-color: #f5f5f5
+}
+
+.note-editor .note-statusbar .note-resizebar {
+    width: 100%;
+    height: 8px;
+    cursor: s-resize;
+    border-top: 1px solid #a9a9a9
+}
+
+.note-editor .note-statusbar .note-resizebar .note-icon-bar {
+    width: 20px;
+    margin: 1px auto;
+    border-top: 1px solid #a9a9a9
+}
+
+.note-editor .note-popover .popover {
+    max-width: none
+}
+
+.note-editor .note-popover .popover .popover-content {
+    padding: 5px
+}
+
+.note-editor .note-popover .popover .popover-content a {
+    display: inline-block;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle
+}
+
+.note-editor .note-popover .popover .popover-content .btn-group + .btn-group {
+    margin-left: 5px
+}
+
+.note-editor .note-popover .popover .arrow {
+    left: 20px
+}
+
+.note-editor .note-handle .note-control-selection {
+    position: absolute;
+    display: none;
+    border: 1px solid black
+}
+
+.note-editor .note-handle .note-control-selection > div {
+    position: absolute
+}
+
+.note-editor .note-handle .note-control-selection .note-control-selection-bg {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    -webkit-opacity: .3;
+    -khtml-opacity: .3;
+    -moz-opacity: .3;
+    opacity: .3;
+    -ms-filter: alpha(opacity=30);
+    filter: alpha(opacity=30)
+}
+
+.note-editor .note-handle .note-control-selection .note-control-handle {
+    width: 7px;
+    height: 7px;
+    border: 1px solid black
+}
+
+.note-editor .note-handle .note-control-selection .note-control-holder {
+    width: 7px;
+    height: 7px;
+    border: 1px solid black
+}
+
+.note-editor .note-handle .note-control-selection .note-control-sizing {
+    width: 7px;
+    height: 7px;
+    background-color: white;
+    border: 1px solid black
+}
+
+.note-editor .note-handle .note-control-selection .note-control-nw {
+    top: -5px;
+    left: -5px;
+    border-right: 0;
+    border-bottom: 0
+}
+
+.note-editor .note-handle .note-control-selection .note-control-ne {
+    top: -5px;
+    right: -5px;
+    border-bottom: 0;
+    border-left: none
+}
+
+.note-editor .note-handle .note-control-selection .note-control-sw {
+    bottom: -5px;
+    left: -5px;
+    border-top: 0;
+    border-right: 0
+}
+
+.note-editor .note-handle .note-control-selection .note-control-se {
+    right: -5px;
+    bottom: -5px;
+    cursor: se-resize
+}
+
+.note-editor .note-handle .note-control-selection .note-control-selection-info {
+    right: 0;
+    bottom: 0;
+    padding: 5px;
+    margin: 5px;
+    font-size: 12px;
+    color: white;
+    background-color: black;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-opacity: .7;
+    -khtml-opacity: .7;
+    -moz-opacity: .7;
+    opacity: .7;
+    -ms-filter: alpha(opacity=70);
+    filter: alpha(opacity=70)
+}
+
+.note-editor .note-dialog > div {
+    display: none
+}
+
+.note-editor .note-dialog .note-image-dialog .note-dropzone {
+    min-height: 100px;
+    margin-bottom: 10px;
+    font-size: 30px;
+    line-height: 4;
+    color: lightgray;
+    text-align: center;
+    border: 4px dashed lightgray
+}
+
+.note-editor .note-dialog .note-help-dialog {
+    font-size: 12px;
+    color: #ccc;
+    background: transparent;
+    background-color: #222 !important;
+    border: 0;
+    -webkit-opacity: .9;
+    -khtml-opacity: .9;
+    -moz-opacity: .9;
+    opacity: .9;
+    -ms-filter: alpha(opacity=90);
+    filter: alpha(opacity=90)
+}
+
+.note-editor .note-dialog .note-help-dialog .modal-content {
+    background: transparent;
+    border: 1px solid white;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none
+}
+
+.note-editor .note-dialog .note-help-dialog a {
+    font-size: 12px;
+    color: white
+}
+
+.note-editor .note-dialog .note-help-dialog .title {
+    padding-bottom: 5px;
+    font-size: 14px;
+    font-weight: bold;
+    color: white;
+    border-bottom: white 1px solid
+}
+
+.note-editor .note-dialog .note-help-dialog .modal-close {
+    font-size: 14px;
+    color: #dd0;
+    cursor: pointer
+}
+
+.note-editor .note-dialog .note-help-dialog .note-shortcut-layout {
+    width: 100%
+}
+
+.note-editor .note-dialog .note-help-dialog .note-shortcut-layout td {
+    vertical-align: top
+}
+
+.note-editor .note-dialog .note-help-dialog .note-shortcut {
+    margin-top: 8px
+}
+
+.note-editor .note-dialog .note-help-dialog .note-shortcut th {
+    font-size: 13px;
+    color: #dd0;
+    text-align: left
+}
+
+.note-editor .note-dialog .note-help-dialog .note-shortcut td:first-child {
+    min-width: 110px;
+    padding-right: 10px;
+    font-family: "Courier New";
+    color: #dd0;
+    text-align: right
+}
+
+.note-editor .note-editable {
+    padding: 20px;
+    overflow: auto;
+    outline: 0
+}
+
+.note-editor .note-editable[contenteditable="false"] {
+    background-color: #e5e5e5
+}
+
+.note-editor .note-codable {
+    display: none;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 0;
+    font-family: Menlo, Monaco, monospace, sans-serif;
+    font-size: 14px;
+    color: #ccc;
+    background-color: #222;
+    border: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+    resize: none
+}
+
+.note-editor .dropdown-menu {
+    min-width: 90px
+}
+
+.note-editor .dropdown-menu.right {
+    right: 0;
+    left: auto
+}
+
+.note-editor .dropdown-menu.right::before {
+    right: 9px;
+    left: auto !important
+}
+
+.note-editor .dropdown-menu.right::after {
+    right: 10px;
+    left: auto !important
+}
+
+.note-editor .dropdown-menu li a i {
+    color: deepskyblue;
+    visibility: hidden
+}
+
+.note-editor .dropdown-menu li a.checked i {
+    visibility: visible
+}
+
+.note-editor .note-fontsize-10 {
+    font-size: 10px
+}
+
+.note-editor .note-color-palette {
+    line-height: 1
+}
+
+.note-editor .note-color-palette div .note-color-btn {
+    width: 17px;
+    height: 17px;
+    padding: 0;
+    margin: 0;
+    border: 1px solid #fff
+}
+
+.note-editor .note-color-palette div .note-color-btn:hover {
+    border: 1px solid #000
+}

src/main/webapp/static/summernotenew/lang/summernote-zh-CN.js

@@ -0,0 +1,155 @@
+(function($) {
+  $.extend($.summernote.lang, {
+    'zh-CN': {
+      font: {
+        bold: '粗体',
+        italic: '斜体',
+        underline: '下划线',
+        clear: '清除格式',
+        height: '行高',
+        name: '字体',
+        strikethrough: '删除线',
+        subscript: '下标',
+        superscript: '上标',
+        size: '字号'
+      },
+      image: {
+        image: '图片',
+        insert: '插入图片',
+        resizeFull: '缩放至 100%',
+        resizeHalf: '缩放至 50%',
+        resizeQuarter: '缩放至 25%',
+        floatLeft: '靠左浮动',
+        floatRight: '靠右浮动',
+        floatNone: '取消浮动',
+        shapeRounded: '形状: 圆角',
+        shapeCircle: '形状: 圆',
+        shapeThumbnail: '形状: 缩略图',
+        shapeNone: '形状: 无',
+        dragImageHere: '将图片拖拽至此处',
+        dropImage: 'Drop image or Text',
+        selectFromFiles: '从本地上传',
+        maximumFileSize: '文件大小最大值',
+        maximumFileSizeError: '文件大小超出最大值。',
+        url: '图片地址',
+        remove: '移除图片',
+        original: 'Original'
+      },
+      video: {
+        video: '视频',
+        videoLink: '视频链接',
+        insert: '插入视频',
+        url: '视频地址',
+        providers: '(优酷, 腾讯, Instagram, DailyMotion, Youtube等)'
+      },
+      link: {
+        link: '链接',
+        insert: '插入链接',
+        unlink: '去除链接',
+        edit: '编辑链接',
+        textToDisplay: '显示文本',
+        url: '链接地址',
+        openInNewWindow: '在新窗口打开'
+      },
+      table: {
+        table: '表格',
+        addRowAbove: 'Add row above',
+        addRowBelow: 'Add row below',
+        addColLeft: 'Add column left',
+        addColRight: 'Add column right',
+        delRow: 'Delete row',
+        delCol: 'Delete column',
+        delTable: 'Delete table'
+      },
+      hr: {
+        insert: '水平线'
+      },
+      style: {
+        style: '样式',
+        p: '普通',
+        blockquote: '引用',
+        pre: '代码',
+        h1: '标题 1',
+        h2: '标题 2',
+        h3: '标题 3',
+        h4: '标题 4',
+        h5: '标题 5',
+        h6: '标题 6'
+      },
+      lists: {
+        unordered: '无序列表',
+        ordered: '有序列表'
+      },
+      options: {
+        help: '帮助',
+        fullscreen: '全屏',
+        codeview: '源代码'
+      },
+      paragraph: {
+        paragraph: '段落',
+        outdent: '减少缩进',
+        indent: '增加缩进',
+        left: '左对齐',
+        center: '居中对齐',
+        right: '右对齐',
+        justify: '两端对齐'
+      },
+      color: {
+        recent: '最近使用',
+        more: '更多',
+        background: '背景',
+        foreground: '前景',
+        transparent: '透明',
+        setTransparent: '透明',
+        reset: '重置',
+        resetToDefault: '默认'
+      },
+      shortcut: {
+        shortcuts: '快捷键',
+        close: '关闭',
+        textFormatting: '文本格式',
+        action: '动作',
+        paragraphFormatting: '段落格式',
+        documentStyle: '文档样式',
+        extraKeys: '额外按键'
+      },
+      help: {
+        insertParagraph: '插入段落',
+        undo: '撤销',
+        redo: '重做',
+        tab: '增加缩进',
+        untab: '减少缩进',
+        bold: '粗体',
+        italic: '斜体',
+        underline: '下划线',
+        strikethrough: '删除线',
+        removeFormat: '清除格式',
+        justifyLeft: '左对齐',
+        justifyCenter: '居中对齐',
+        justifyRight: '右对齐',
+        justifyFull: '两端对齐',
+        insertUnorderedList: '无序列表',
+        insertOrderedList: '有序列表',
+        outdent: '减少缩进',
+        indent: '增加缩进',
+        formatPara: '设置选中内容样式为 普通',
+        formatH1: '设置选中内容样式为 标题1',
+        formatH2: '设置选中内容样式为 标题2',
+        formatH3: '设置选中内容样式为 标题3',
+        formatH4: '设置选中内容样式为 标题4',
+        formatH5: '设置选中内容样式为 标题5',
+        formatH6: '设置选中内容样式为 标题6',
+        insertHorizontalRule: '插入水平线',
+        'linkDialog.show': '显示链接对话框'
+      },
+      history: {
+        undo: '撤销',
+        redo: '重做'
+      },
+      specialChar: {
+        specialChar: 'SPECIAL CHARACTERS',
+        select: 'Select Special characters'
+      }
+    }
+  });
+})(jQuery);