查看效果：http://keleyi.com/keleyi/phtml/jqplug/4.htm
JQ-Slide插件功能强大，滚动方式自由多样
全部滚动方式 方式一 方式二 方式三 方式四 方式五 方式六

JQ-Slide插件参数说明表
参数名 参数值(默认值可以省略)  
effect scroolY（默认）：垂直滚动  
scroolX：水平滚动
scroolTxt：文本垂直滚动
fade：淡出
scroolLoop：水平左右点击滚动
autoPlay true（默认）： or false  
speed 动画速度时间，默认"normal"，可以使用毫秒或者JQ中的fast，slow，normal  
timer 滚动间隔时间，默认"1000，可以使用毫秒或者JQ中的fast，slow，normal  
claNav JQ-slide-nav（默认）：触点对象数组父级  
claCon JQ-slide-content（默认）：滚动对象或滚动对象父级  
steps 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>

keleyislide

最新请参考：http://keleyi.com/a/bjac/w6cftw6h.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

jQuery：http://www.cnblogs.com/jihua/category/459602.html

功能强大的滚动播放插件JQ-Slide的更多相关文章

  1. Vanilla Masker – 功能强大的输入过滤插件

    Vanilla Masker 是一个纯 JavaScript 实现的输入内容过滤和自动转换插件.现在你可以使用一个简单而纯粹的 JavaScript 库来控制你的 input 元素,而不需要加载 jQ ...

  2. 20+功能强大的jQuery/CSS3图片特效插件

    以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

  3. jQuery功能强大的图片查看器插件

    简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...

  4. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  5. 基于jQuery功能非常强大的图片裁剪插件

    今天我们要来介绍一款基于jQuery功能非常强大的图片裁剪插件,这款jQuery图片裁剪插件可以选择裁剪框的尺寸比例,可以设置高宽尺寸,同时可以设置图片翻转角度,当然也支持图片的缩放,裁剪框也可以用鼠 ...

  6. 功能强大的文件上传插件带上传进度-WebUploader

    WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...

  7. ZBrush中功能强大的插件PaintStop

    PaintStop是ZBrush®3.1的手绘插件,可以比较真实的模拟手绘风格,尤其是用水彩笔刷画水墨风格画.PaintStop插件可供用户免费使用. PaintStop是一款功能强大的插件,已经被添 ...

  8. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  9. 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

随机推荐

  1. 数据库的Disk Space usage

    SQL Server占用的存储空间,包含数据库file占用的存储空间,数据库对象占用的存储空间. 一,数据库file占用的存储空间 1,使用 sys.master_files 查看数据库中各个file ...

  2. C#设计模式系列：适配器模式（Adapter）

    在实际的软件系统设计和开发中,为了完成某项工作需要购买一个第三方的库来加快开发.这带来一个问题,在应用程序中已经设计好的功能接口,与这个第三方提供的接口不一致.为了使得这些接口不兼容的类可以在一起工作 ...

  3. jquery $.each的用法

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...

  4. Spire.Pdf 的各种操作总结

     Spire.Pdf 的各种操作总结 简介 试验新产品总是给我带来许多挑战,当然这也是一个引进创新技术的好方法.在这里我要跟大家分享的是使用Spire.Pdf的过程,它是来自E-iceblue公司的轻 ...

  5. JS详细入门教程（上）

    首先,我们看一下DOM级别和兼容性: 之前好像在某本上看到说DOM有0级,实际上,DOM0级标准是不存在的.DOM有1.2.3三个级别.DOM1级由两个模块组成(DOM Core和DOM HTML), ...

  6. 1Z0-053 争议题目解析498

    1Z0-053 争议题目解析498 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 498.The database Is configured in ARCHIVELOG mode ...

  7. ssh整合问题总结--在添加商品模块实现图片(文件)的上传

    今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...

  8. 重温JSP学习笔记--JSTL标签库

    以前写jsp的时候对jstl标签库是有些抵触的,因为我觉得嵌入java代码的方式几乎无往不利,没有必要使用标签库,不过这次复习还是好好地学习了一下,发现这个还是很有用处的,用得好能省不少事,JSTL是 ...

  9. XCode日常使用备忘录

    0. Introduction XCode是macOS上开发app不可缺少的开发者工具,不管是开发macOS上的应用,还是iOS上的应用,都离不开XCode环境.尽管其易用性广受诟病,但由于苹果app ...

  10. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...