查看效果：http://keleyi.com/keleyi/phtml/jqplug/4.htm
JQ-Slide插件功能强大，滚动方式自由多样
全部滚动方式?方式一?方式二?方式三?方式四?方式五?方式六
??
| 参数值(默认值可以省略) | ? |
| scroolY（默认）：垂直滚动 | ? |
| scroolX：水平滚动 | |
| scroolTxt：文本垂直滚动 | |
| fade：淡出 | |
| scroolLoop：水平左右点击滚动 | |
| true（默认）： or false | ? |
| 动画速度时间，默认"normal"，可以使用毫秒或者JQ中的fast，slow，normal | ? |
| 滚动间隔时间，默认"1000，可以使用毫秒或者JQ中的fast，slow，normal | ? |
| JQ-slide-nav（默认）：触点对象数组父级 | ? |
| JQ-slide-content（默认）：滚动对象或滚动对象父级 | ? |
| 1（默认）：滚动几个 | ? |
??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><base target="_blank" />
<title>功能强大的滚动播放插件JQ-Slide示例-柯乐义</title>
<link href="http://keleyi.com/keleyi/phtml/jqplug/4/css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style type="text/css">
/* base */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:7100;}
h1{font-size:18px}
h2{font-size:16px}
h3{font-size:14px}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:12px}
q:before,q:after{content:''}
abbr,acronym{border:0}
hr {margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px}
blockquote{color:#666;font-style:italic;}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
pre{white-space:pre;}
pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
/*clear clearfix*/
.clearfix:after {content: "020"; display: block; height: 0;clear: both; visibility: hidden }
.clearfix {zoom: 1;}
.clear{clear:both;}
/* table */
h3{margin:5px;font-size:20px}
pre{background-color:#FFFDDE;margin:10px 0;padding:10px}
#page{margin-left:100px}
/* keleyi1 */
#keleyi1{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
#keleyi1 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
#keleyi1 .JQ-content-box .JQ-slide-content{position:absolute}
#keleyi1 .JQ-content-box .JQ-slide-content li{zoom:1;overflow:hidden;height:289px;vertical-align:text-top}
#keleyi1 .JQ-content-box .JQ-slide-content li img{width:549px;height:289px;display:block}
#keleyi1 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
#keleyi1 .JQ-slide-nav li{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/nom.png)}
#keleyi1 .JQ-slide-nav li.on{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/on_box.png)}
#keleyi1 .JQ-slide-nav li img{width:127px;height:61px;display:block}
/* keleyi2 */
#keleyi2{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
#keleyi2 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
#keleyi2 .JQ-content-box .JQ-slide-content{position:absolute}
#keleyi2 .JQ-content-box li{width:549px;height:289px;float:left;}
#keleyi2 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
#keleyi2 .JQ-slide-nav li{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/nom.png)}
#keleyi2 .JQ-slide-nav li.on{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/on_box.png)}
#keleyi2 .JQ-slide-nav li img{width:127px;height:61px;display:block}
/* keleyi3 */
#keleyi3{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
#keleyi3 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
#keleyi3 .JQ-content-box .JQ-slide-content li{position:absolute;top:0;left:0}
#keleyi3 .JQ-content-box img{width:549px;height:289px;display:block}
#keleyi3 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
#keleyi3 .JQ-slide-nav li{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/nom.png)}
#keleyi3 .JQ-slide-nav li.on{display:inline;float:left;padding-left:12px;padding-bottom:6px;width:133px;height:61px;padding-top:6px;margin-bottom:3px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/on_box.png)}
#keleyi3 .JQ-slide-nav li img{width:127px;height:61px;display:block}
/* slide-box */
#slide-box{width:690px;position:relative;height:472px;}
#slide-box .corner{clear:both;border-top:#333 1px solid;display:block;overflow:hidden;height:0;margin:0 1px;}
#slide-box .slide-content{background:#333;padding:10px;}
#slide-box .JQ-slide-content{position:absolute;}
#slide-box .JQ-slide-nav a{display:block;z-index:99;width:37px;color:#b4b4b4;position:absolute;top:205px;height:65px;text-decoration:none;}
#slide-box .JQ-slide-nav span{display:block;background:#4b4b4b;font:700 53px arial;width:37px;cursor:pointer;height:63px;text-align:center;}
#slide-box .JQ-slide-nav .corner{border-color:#4b4b4b;}
#slide-box .JQ-slide-nav .prev{left:-10px;}
#slide-box .JQ-slide-nav .next{right:-10px;}
#slide-box .wrap{overflow:hidden;width:670px;height:450px;position:relative;}
#slide-box ul{width:10000px;}
#slide-box li{float:left;width:340px;height:450px;}
#slide-box li img{width:330px;height:450px;}
#slide-box .JQ-slide-nav a:hover,#slide-box .JQ-slide-nav a:hover span{color:#f43d1e;}
/* keleyi5 */
#keleyi5{overflow:auto}
#keleyi5 .JQ-content-box{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#keleyi5 .JQ-slide-content{}
#keleyi5 .JQ-slide-content li{height:25px;padding-left:10px;}
/* keleyi6 */
#keleyi6 .JQ-content-box{overflow:hidden;width:710px;height:144px;position:relative}
#keleyi6 .JQ-slide-content{position:absolute}
#keleyi6 .JQ-slide-content li{zoom:1;overflow:hidden;height:144px;vertical-align:text-top}
#keleyi6 img{display:block;}
#keleyi6 .JQ-slide-nav{position:absolute;right:10px;bottom:10px;height:18px;padding-top:2px;}
#keleyi6 .JQ-slide-nav li{background-color:#FFE0EB;border:1px solid #FF6699;color:#D94B01;cursor:pointer;float:left;font-size:12px;height:16px;line-height:16px;margin-left:3px;text-align:center;width:16px;}
#keleyi6 .JQ-slide-nav li.on{background-color:#EB3C65;border-color:#9A102F;color:#FFFFFF;font-weight:bold;height:18px;line-height:18px;margin-top:-2px;width:18px;}
#keleyi6 .JQ-slide-nav li img{display:block}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/4/js/jq.Slide.js"></script>
<script type="text/javascript">
$(function () {
$("#ke"+"leyi1").Slide({
effect: "scroolY",
speed: "normal",
timer: 3000
});
$("#keleyi2").Slide({
effect: "scroolX",
speed: "normal",
timer: 3000
});
$("#kel"+"eyi3").Slide({
effect: "fade",
speed: "normal",
timer: 3000
});
$("#keleyi4").Slide({
effect: "scroolLoop",
autoPlay: false,
speed: "normal",
timer: 3000,
steps: 2
});
$("#keley"+"i5").Slide({
effect: "scroolTxt",
speed: "normal",
timer: 3000,
steps: 1
});
$("#keleyi6").Slide({
effect: "scroolY",
speed: "normal",
timer: 3000
});
});
</script>
</head>
<body>
<div class="headeline"></div>
<div id="page">
<br /> <a href="http://keleyi.com/a/bjac/w6cftw6h.htm">插件参数</a> <a href="http://keleyi.com/keleyi/phtml/jqplug/4a.htm">独立查看</a>
<h3>滚动一：</h3>
<div id="keleyi1">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad1.jpg" width="549" /></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad2.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad3.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad4.jpg" width="549"></a></li>
</ul>
</div>
<ul class="JQ-slide-nav">
<li class="on"><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg1.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
</ul>
</div><!--keleyi1 end-->
<pre>
$("#keleyi1").Slide({
effect : "scroolY",
speed : "normal",
timer : 3000
});
</pre>
<hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4b.htm">独立查看</a>
<h3>滚动二：</h3>
<div id="keleyi2">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad1.jpg" width="549" /></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad2.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad3.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad4.jpg" width="549"></a></li>
</ul>
</div>
<ul class="JQ-slide-nav">
<li class="on"><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg1.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
</ul>
</div><!--keleyi2 end-->
<pre>
$("#keleyi2").Slide({
effect : "scroolX",
speed : "normal",
timer : 3000
});
</pre>
<hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4c.htm">独立查看</a>
<h3>滚动三：</h3>
<div id="keleyi3">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad1.jpg" width="549" /></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad2.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad3.jpg" width="549"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img height="289" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/ad4.jpg" width="549"></a></li>
</ul>
</div>
<ul class="JQ-slide-nav">
<li class="on"><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg1.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
<li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
</ul>
</div><!--keleyi3 end-->
<pre>
$("#keleyi3").Slide({
effect : "fade",
speed : "normal",
timer : 3000
});
</pre>
<hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4d.htm">独立查看</a>
<h3>滚动四：</h3>
<div id="slide-box">
<b class="corner"></b>
<div class="slide-content" id="keleyi4">
<div class="wrap">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/a/bjac/y63we342.htm"><IMG src="http://keleyi.com/image/a/dbkfr65p.jpg" alt="柯乐义" width="330" height="450" /></a></li>
<li><a href="http://keleyi.com/a/bjac/iphgrtqm.htm"><IMG alt="柯乐义" src="http://keleyi.com/image/a/mx7s0cpe.jpg" width="330" height="450" /></a></li>
<li><a href="http://keleyi.com/a/bjac/jmhqxrr4.htm"><IMG alt="柯乐义" src="http://keleyi.com/image/a/0ms3ypph.jpg" width="330" height="450" /></a></li>
<li><a href="http://keleyi.com/a/bjac/v6c7x9fq.htm"><IMG alt="柯乐义" src="http://keleyi.com/image/a/01i4pfnm.jpg" width="330" height="450" /></a></li>
<li><a href="http://keleyi.com/a/bjac/a96fnfrf.htm"><IMG alt="柯乐义" src="http://keleyi.com/image/a/vnb53fg9.jpg" width="330" height="450" /></a></li>
<li><a href="http://keleyi.com/dev/e09864db1363b7b6.htm"><IMG alt="柯乐义" src="http://keleyi.com/image/a/4mpr7wo9.jpg" width="330" height="450" /></a></li>
</ul>
</div>
<div class="JQ-slide-nav">
<a class="prev" href="#">
<b class="corner"></b>
<span>‹</span>
<B class="corner"></B>
</a>
<a class="next" href="#">
<b class="corner"></b>
<span>›</span>
<B class="corner"></B>
</a>
</div>
</div>
<b class="corner"></b>
</div><!--slide-box end-->
<pre>
$("#keleyi4").Slide({
effect : "scroolLoop",
autoPlay:false,
speed : "normal",
timer : 3000,
steps:2
});
</pre>
<hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4e.htm">独立查看</a>
<h3>滚动五：</h3>
<div id="keleyi5">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/a/bjac/0ttmf3ib.htm">jQuery焦点新闻图片轮播</a></li>
<li><a href="http://keleyi.com/a/bjac/6y2adkcl.htm">jQuery中的事件处理</a></li>
<li><a href="http://keleyi.com/a/bjac/x7h2nmjo.htm">jQuery CSS样式操作语句</a></li>
<li><a href="http://keleyi.com/a/bjac/xkqqoac2.htm">jQuery柯乐义选美大赛</a></li>
<li><a href="http://keleyi.com/a/bjac/i4nb1p5i.htm">一个例子学习jquery的$(this)</a></li>
<li><a href="http://keleyi.com/a/bjac/8ah0br9p.htm">jQ:not 选择器</a></li>
<li><a href="http://keleyi.com/a/bjac/q5rgk1mq.htm">jQuery :visible 选择器（冒号）</a></li>
<li><a href="http://keleyi.com/a/bjac/jmhqxrr4.htm">jQuery的13个优点</a></li>
<li><a href="http://keleyi.com/a/bjac/e9qcsill.htm">jQ的Click事件</a></li>
<li><a href="http://keleyi.com/a/bjac/01wjh0a0.htm">jquery根据name属性的高级选择</a></li>
<li><a href="http://keleyi.com/a/bjac/eilhbrcm.htm">jQuery的可折叠的侧边栏菜单</a></li>
<li><a href="http://keleyi.com/a/bjac/fds76xqw.htm">jQuery删除元素往外飞</a></li>
<li><a href="http://keleyi.com/a/bjac/e8t7hoj4.htm">jQuery下雪</a></li>
<li><a href="http://keleyi.com/a/bjac/6g9bsqmm.htm" title="jQ让部分内容在滚动的某阶段一直显示">jQ让部分内容在滚动的某阶段一直显...</a></li>
<li><a href="http://keleyi.com/a/bjac/8p778pqo.htm">jQ实现JSON.stringify(obj)方法</a></li>
<li><a href="http://keleyi.com/a/bjac/un8ic3hu.htm">jQuery插件开发例子</a></li>
<li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm">弹出灯箱窗口浏览图片</a></li>
<li><a href="http://keleyi.com/a/bjac/hxv86dyi.htm">jQuery动态提示消息框效果</a></li>
<li><a href="http://keleyi.com/a/bjac/13qbdos8.htm">jQuery插件开发教程</a></li>
<li><a href="http://keleyi.com/a/bjac/ud417n63.htm" title="'browser.opera' 为空或不是对象">'browser.opera' 为空或不...</a></li>
<li><a href="http://keleyi.com/a/bjac/h864ixme.htm" title="'$.browser.msie' 为空或不是对象">'$.browser.msie' 为空或...</a></li>
<li><a href="http://keleyi.com/a/bjac/h15fg72n.htm" title="jQuery实现球面滚动效果,球形标签云(TagCloud)">jQuery实现球面滚动效果,球形标签...</a></li>
<li><a href="http://keleyi.com/a/bjac/xc8g7uiy.htm">jquery向上弹出菜单</a></li>
<li><a href="http://keleyi.com/a/bjac/fbfoqqbp.htm" title="jquery定时滑出可最小化的底部提示层">jquery定时滑出可最小化的底部提示...</a></li>
<li><a href="http://keleyi.com/a/bjac/qe60secm.htm">jquery实现多级下拉菜单</a></li>
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li>
<li><a href="http://keleyi.com/a/bjac/xwa8hmpw.htm" title="jQuery鼠标滚轮事件插件Mouse Wheel">jQuery鼠标滚轮事件插件Mouse Whee...</a></li>
</ul>
</div>
</div><!--keleyi5 end-->
<pre>
$("#keleyi5").Slide({
effect : "scroolTxt",
speed : "normal",
timer : 3000,
steps:1
});
</pre>
<hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4f.htm">独立查看</a>
<h3>滚动六：</h3>
<div id="keleyi6">
<div class="JQ-content-box">
<ul class="JQ-slide-content">
<li><a href="http://keleyi.com/game/1/"><img height="144" alt="" title="" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/g5.jpg" width="710" /></a> </li>
<li><a href="http://keleyi.com/game/4/"><img height="144" alt="" title="" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/20100820-284f62ce01db688e.jpg" width="710" /></a> </li>
<li><a href="http://keleyi.com/game/8/"><img height="144" alt="" title="" src="http://keleyi.com/keleyi/phtml/jqplug/4/images/g1.jpg" width="710" /></a> </li>
</ul>
<ul class="JQ-slide-nav">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div><!--keleyi6 end-->
<pre>
$("#keleyi6").Slide({
effect : "scroolY",
speed : "normal",
timer : 3000
});
</pre>
</div>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://keleyi.com/">柯乐义</a></p>
</div>
</body>
</html>
?
最新请参考：http://keleyi.com/a/bjac/w6cftw6h.htm
http://ini.iteye.com
?