Commit 8b5f31b8 authored by Huang's avatar Huang
Browse files

no commit message

parent d8b3ed74
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment