查看效果：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（默认）：滚动几个 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><base target="_blank" />
  5 <title>功能强大的滚动播放插件JQ-Slide示例-柯乐义</title>
  6 <link href="http://keleyi.com/keleyi/phtml/jqplug/4/css/style.css" type="text/css" rel="stylesheet" />
  7 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  8 <style type="text/css">
  9 /* base */
 10 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;}
 11 table{border-collapse:collapse;border-spacing:0}
 12 fieldset,img{border:0}
 13 address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
 14 ol,ul{list-style:none}
 15 caption,th{text-align:left}
 16 h1,h2,h3,h4,h5,h6{font-weight:7100;}
 17 h1{font-size:18px}
 18 h2{font-size:16px}
 19 h3{font-size:14px}
 20 h4{font-size:14px}
 21 h5{font-size:12px}
 22 h6{font-size:12px}
 23 q:before,q:after{content:''}
 24 abbr,acronym{border:0}
 25 hr {margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px}
 26 blockquote{color:#666;font-style:italic;}
 27 sup,sub{line-height:0}
 28 abbr,acronym{border-bottom:1px dotted #666}
 29 pre{white-space:pre;}
 30 pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
 31 /*clear clearfix*/
 32 .clearfix:after {content: "020"; display: block; height: 0;clear: both; visibility: hidden }
 33 .clearfix {zoom: 1;}
 34 .clear{clear:both;}
 35 /* table */
 36 h3{margin:5px;font-size:20px}
 37 pre{background-color:#FFFDDE;margin:10px 0;padding:10px}
 38 #page{margin-left:100px}
 39 /* keleyi1 */
 40 #keleyi1{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
 41 #keleyi1 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
 42 #keleyi1 .JQ-content-box .JQ-slide-content{position:absolute}
 43 #keleyi1 .JQ-content-box .JQ-slide-content li{zoom:1;overflow:hidden;height:289px;vertical-align:text-top}
 44 #keleyi1 .JQ-content-box .JQ-slide-content li img{width:549px;height:289px;display:block}
 45 #keleyi1 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
 46 #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)}
 47 #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)}
 48 #keleyi1 .JQ-slide-nav li img{width:127px;height:61px;display:block}
 49 /* keleyi2 */
 50 #keleyi2{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
 51 #keleyi2 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
 52 #keleyi2 .JQ-content-box .JQ-slide-content{position:absolute}
 53 #keleyi2 .JQ-content-box li{width:549px;height:289px;float:left;}
 54 #keleyi2 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
 55 #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)}
 56 #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)}
 57 #keleyi2 .JQ-slide-nav li img{width:127px;height:61px;display:block}
 58 /* keleyi3 */
 59 #keleyi3{height:301px;width:709px;background:url(http://keleyi.com/keleyi/phtml/jqplug/4/images/bg.png) no-repeat}
 60 #keleyi3 .JQ-content-box{float:left;overflow:hidden;width:549px;height:289px;margin:6px 0 0 6px;_margin:6px 0 0 3px;position:relative}
 61 #keleyi3 .JQ-content-box .JQ-slide-content  li{position:absolute;top:0;left:0}
 62 #keleyi3 .JQ-content-box img{width:549px;height:289px;display:block}
 63 #keleyi3 .JQ-slide-nav{display:block;float:right;width:145px;height:301px;overflow:hidden;}
 64 #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)}
 65 #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)}
 66 #keleyi3 .JQ-slide-nav li img{width:127px;height:61px;display:block}
 67 /* slide-box */
 68 #slide-box{width:690px;position:relative;height:472px;}
 69 #slide-box .corner{clear:both;border-top:#333 1px solid;display:block;overflow:hidden;height:0;margin:0 1px;}
 70 #slide-box .slide-content{background:#333;padding:10px;}
 71 #slide-box .JQ-slide-content{position:absolute;}
 72 #slide-box .JQ-slide-nav a{display:block;z-index:99;width:37px;color:#b4b4b4;position:absolute;top:205px;height:65px;text-decoration:none;}
 73 #slide-box .JQ-slide-nav span{display:block;background:#4b4b4b;font:700 53px arial;width:37px;cursor:pointer;height:63px;text-align:center;}
 74 #slide-box .JQ-slide-nav .corner{border-color:#4b4b4b;}
 75 #slide-box .JQ-slide-nav .prev{left:-10px;}
 76 #slide-box .JQ-slide-nav .next{right:-10px;}
 77 #slide-box .wrap{overflow:hidden;width:670px;height:450px;position:relative;}
 78 #slide-box ul{width:10000px;}
 79 #slide-box li{float:left;width:340px;height:450px;}
 80 #slide-box li img{width:330px;height:450px;}
 81 #slide-box .JQ-slide-nav a:hover,#slide-box .JQ-slide-nav a:hover span{color:#f43d1e;}
 82 /* keleyi5 */
 83 #keleyi5{overflow:auto}
 84 #keleyi5 .JQ-content-box{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
 85 #keleyi5 .JQ-slide-content{}
 86 #keleyi5 .JQ-slide-content li{height:25px;padding-left:10px;}
 87 /* keleyi6 */
 88 #keleyi6 .JQ-content-box{overflow:hidden;width:710px;height:144px;position:relative}
 89 #keleyi6 .JQ-slide-content{position:absolute}
 90 #keleyi6 .JQ-slide-content li{zoom:1;overflow:hidden;height:144px;vertical-align:text-top}
 91 #keleyi6 img{display:block;}
 92 #keleyi6 .JQ-slide-nav{position:absolute;right:10px;bottom:10px;height:18px;padding-top:2px;}
 93 #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;}
 94 #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;}
 95 #keleyi6 .JQ-slide-nav li img{display:block}
 96 </style>
 97
 98 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqplug/4/js/jq.Slide.js"></script>
 99 <script type="text/javascript">
100     $(function () {
101
102         $("#ke"+"leyi1").Slide({
103             effect: "scroolY",
104             speed: "normal",
105             timer: 3000
106         });
107
108         $("#keleyi2").Slide({
109             effect: "scroolX",
110             speed: "normal",
111             timer: 3000
112         });
113
114         $("#kel"+"eyi3").Slide({
115             effect: "fade",
116             speed: "normal",
117             timer: 3000
118         });
119
120         $("#keleyi4").Slide({
121             effect: "scroolLoop",
122             autoPlay: false,
123             speed: "normal",
124             timer: 3000,
125             steps: 2
126         });
127
128         $("#keley"+"i5").Slide({
129             effect: "scroolTxt",
130             speed: "normal",
131             timer: 3000,
132             steps: 1
133         });
134
135         $("#keleyi6").Slide({
136             effect: "scroolY",
137             speed: "normal",
138             timer: 3000
139         });
140
141     });
142 </script>
143 </head>
144 <body>
145 <div class="headeline"></div>
146 <div id="page">
147         <br /> <a href="http://keleyi.com/a/bjac/w6cftw6h.htm">插件参数</a> <a href="http://keleyi.com/keleyi/phtml/jqplug/4a.htm">独立查看</a>
148         <h3>滚动一：</h3>
149         <div id="keleyi1">
150             <div class="JQ-content-box">
151                 <ul class="JQ-slide-content">
152                     <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>
153                     <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>
154                     <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>
155                     <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>
156                 </ul>
157             </div>
158             <ul class="JQ-slide-nav">
159                 <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>
160                 <li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
161                 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
162                 <li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
163             </ul>
164         </div><!--keleyi1 end-->
165 <pre>
166 $("#keleyi1").Slide({
167     effect : "scroolY",
168     speed : "normal",
169     timer : 3000
170 });
171 </pre>
172
173         <hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4b.htm">独立查看</a>
174         <h3>滚动二：</h3>
175         <div id="keleyi2">
176             <div class="JQ-content-box">
177                 <ul class="JQ-slide-content">
178                     <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>
179                     <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>
180                     <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>
181                     <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>
182                 </ul>
183             </div>
184             <ul class="JQ-slide-nav">
185                 <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>
186                 <li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
187                 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
188                 <li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
189             </ul>
190         </div><!--keleyi2 end-->
191 <pre>
192 $("#keleyi2").Slide({
193     effect : "scroolX",
194     speed : "normal",
195     timer : 3000
196 });
197 </pre>
198
199         <hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4c.htm">独立查看</a>
200         <h3>滚动三：</h3>
201         <div id="keleyi3">
202             <div class="JQ-content-box">
203                 <ul class="JQ-slide-content">
204                     <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>
205                     <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>
206                     <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>
207                     <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>
208                 </ul>
209             </div>
210             <ul class="JQ-slide-nav">
211                 <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>
212                 <li><a href="http://keleyi.com/a/bjac/sl5wjh8t.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg2.jpg"></a></li>
213                 <li><a href="http://keleyi.com/a/bjac/veugsmw9.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg3.jpg"></a></li>
214                 <li><a href="http://keleyi.com/a/bjac/516kx8p1.htm"><img src="http://keleyi.com/keleyi/phtml/jqplug/4/images/guangg4.jpg"></a></li>
215             </ul>
216         </div><!--keleyi3 end-->
217 <pre>
218 $("#keleyi3").Slide({
219     effect : "fade",
220     speed : "normal",
221     timer : 3000
222 });
223 </pre>
224
225         <hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4d.htm">独立查看</a>
226         <h3>滚动四：</h3>
227         <div id="slide-box">
228             <b class="corner"></b>
229             <div class="slide-content" id="keleyi4">
230                 <div class="wrap">
231                     <ul class="JQ-slide-content">
232                         <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>
233                         <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>
234                         <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>
235                         <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>
236                         <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>
237                         <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>
238                     </ul>
239                 </div>
240                 <div class="JQ-slide-nav">
241                     <a class="prev" href="#">
242                         <b class="corner"></b>
243                         <span>‹</span>
244                         <B class="corner"></B>
245                     </a>
246                     <a class="next" href="#">
247                         <b class="corner"></b>
248                         <span>›</span>
249                         <B class="corner"></B>
250                     </a>
251                 </div>
252             </div>
253             <b class="corner"></b>
254         </div><!--slide-box end-->
255 <pre>
256 $("#keleyi4").Slide({
257     effect : "scroolLoop",
258     autoPlay:false,
259     speed : "normal",
260     timer : 3000,
261     steps:2
262 });
263 </pre>
264
265
266         <hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4e.htm">独立查看</a>
267         <h3>滚动五：</h3>
268         <div id="keleyi5">
269             <div class="JQ-content-box">
270                 <ul class="JQ-slide-content">
271 <li><a href="http://keleyi.com/a/bjac/0ttmf3ib.htm">jQuery焦点新闻图片轮播</a></li>
272 <li><a href="http://keleyi.com/a/bjac/6y2adkcl.htm">jQuery中的事件处理</a></li>
273 <li><a href="http://keleyi.com/a/bjac/x7h2nmjo.htm">jQuery CSS样式操作语句</a></li>
274 <li><a href="http://keleyi.com/a/bjac/xkqqoac2.htm">jQuery柯乐义选美大赛</a></li>
275 <li><a href="http://keleyi.com/a/bjac/i4nb1p5i.htm">一个例子学习jquery的$(this)</a></li>
276 <li><a href="http://keleyi.com/a/bjac/8ah0br9p.htm">jQ:not 选择器</a></li>
277 <li><a href="http://keleyi.com/a/bjac/q5rgk1mq.htm">jQuery :visible 选择器（冒号）</a></li>
278 <li><a href="http://keleyi.com/a/bjac/jmhqxrr4.htm">jQuery的13个优点</a></li>
279 <li><a href="http://keleyi.com/a/bjac/e9qcsill.htm">jQ的Click事件</a></li>
280 <li><a href="http://keleyi.com/a/bjac/01wjh0a0.htm">jquery根据name属性的高级选择</a></li>
281 <li><a href="http://keleyi.com/a/bjac/eilhbrcm.htm">jQuery的可折叠的侧边栏菜单</a></li>
282 <li><a href="http://keleyi.com/a/bjac/fds76xqw.htm">jQuery删除元素往外飞</a></li>
283 <li><a href="http://keleyi.com/a/bjac/e8t7hoj4.htm">jQuery下雪</a></li>
284 <li><a href="http://keleyi.com/a/bjac/6g9bsqmm.htm" title="jQ让部分内容在滚动的某阶段一直显示">jQ让部分内容在滚动的某阶段一直显...</a></li>
285 <li><a href="http://keleyi.com/a/bjac/8p778pqo.htm">jQ实现JSON.stringify(obj)方法</a></li>
286 <li><a href="http://keleyi.com/a/bjac/un8ic3hu.htm">jQuery插件开发例子</a></li>
287 <li><a href="http://keleyi.com/a/bjac/ppdss7ux.htm">弹出灯箱窗口浏览图片</a></li>
288 <li><a href="http://keleyi.com/a/bjac/hxv86dyi.htm">jQuery动态提示消息框效果</a></li>
289 <li><a href="http://keleyi.com/a/bjac/13qbdos8.htm">jQuery插件开发教程</a></li>
290 <li><a href="http://keleyi.com/a/bjac/ud417n63.htm" title="'browser.opera' 为空或不是对象">'browser.opera' 为空或不...</a></li>
291 <li><a href="http://keleyi.com/a/bjac/h864ixme.htm" title="'$.browser.msie' 为空或不是对象">'$.browser.msie' 为空或...</a></li>
292 <li><a href="http://keleyi.com/a/bjac/h15fg72n.htm" title="jQuery实现球面滚动效果,球形标签云(TagCloud)">jQuery实现球面滚动效果,球形标签...</a></li>
293 <li><a href="http://keleyi.com/a/bjac/xc8g7uiy.htm">jquery向上弹出菜单</a></li>
294 <li><a href="http://keleyi.com/a/bjac/fbfoqqbp.htm" title="jquery定时滑出可最小化的底部提示层">jquery定时滑出可最小化的底部提示...</a></li>
295 <li><a href="http://keleyi.com/a/bjac/qe60secm.htm">jquery实现多级下拉菜单</a></li>
296 <li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">jquery ui 可折叠手风琴菜单</a></li>
297 <li><a href="http://keleyi.com/a/bjac/xwa8hmpw.htm" title="jQuery鼠标滚轮事件插件Mouse Wheel">jQuery鼠标滚轮事件插件Mouse Whee...</a></li>
298                 </ul>
299             </div>
300         </div><!--keleyi5 end-->
301 <pre>
302 $("#keleyi5").Slide({
303     effect : "scroolTxt",
304     speed : "normal",
305     timer : 3000,
306     steps:1
307 });
308 </pre>
309
310         <hr /><br /><a href="http://keleyi.com/keleyi/phtml/jqplug/4f.htm">独立查看</a>
311         <h3>滚动六：</h3>
312         <div id="keleyi6">
313             <div class="JQ-content-box">
314                 <ul class="JQ-slide-content">
315                     <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>
316                     <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>
317                     <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>
318                 </ul>
319                 <ul class="JQ-slide-nav">
320                     <li class="on">1</li>
321                     <li>2</li>
322                     <li>3</li>
323                 </ul>
324             </div>
325         </div><!--keleyi6 end-->
326 <pre>
327 $("#keleyi6").Slide({
328     effect : "scroolY",
329     speed : "normal",
330     timer : 3000
331 });
332 </pre>
333
334     </div>
335 <!--演示内容结束-->
336 <div style="text-align:center;clear:both">
337 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
338 <p>来源：<a href="http://keleyi.com/">柯乐义</a></p>
339 </div>
340 </body>
341 </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

转载于:https://www.cnblogs.com/jihua/p/JQSlide.html

功能强大的滚动播放插件JQ-Slide相关推荐

  1. UUOffice 工具箱，一款功能强大的 Excel 办公插件，好用推荐 ~

    简介 UUOffice 工具箱,是一款功能强大的Office插件,功能强大,有着各种的单元格及文本的处理工具,自定义扩展函数,批注管理,图片导入导出,工作表汇总,联想输入等等超多实用工具,对日常办公效 ...

  2. html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件

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

  3. alert()的功能_功能强大的Flutter 视频播放插件

    简介 flutter_tencentplayer_plus 是基于腾讯云点播封装的flutter版的播放器插件 提供video_player 相似的api, 是flutter_tencentplaye ...

  4. 多款功能强大的chrome谷歌浏览器插件推荐

    chrome谷歌浏览器插件推荐 Enable Copy 遇到限制复制粘贴和右键的网页是不是很头痛?安装这个插件后,点下插件按钮就能解决了- JSONView 可以将后端返回的json格式化,让结构更清 ...

  5. 手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件

    FlexSlider是一款功能强大的响应式jQuery幻灯片插件.该幻灯片插件可以制作为带缩略图模式,旋转木马模式等.它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效.它的兼容性强,可以兼容IE7+ ...

  6. 强大的jQuery幻灯片播放插件 支持全拼、拖拽和下载等功能

    强大的jQuery幻灯片播放插件 支持全拼.拖拽和下载等功能 在线演示 本地下载 posted @ 2018-11-29 11:30 栖息地 阅读(...) 评论(...) 编辑 收藏

  7. html展开插件,分享10款功能强大的HTML5/CSS3应用插件

    本文作者html5tricks,转载请注明出处 今天我们整理了10款功能非常强大的 1.纯CSS3美化 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选 ...

  8. java 图片插件_[Java教程]10款功能强大的jQuery/CSS3图片特效插件

    [Java教程]10款功能强大的jQuery/CSS3图片特效插件 0 2014-11-26 03:01:04 1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网 ...

  9. html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper

    插件描述:相信很多朋友都在大型的网站,如新浪微博.QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强 ...

最新文章

  1. 关于本分类(codeforces-好题系列)
  2. Python 之 Pandas (六)合并
  3. 大整数乘法---FFT算法
  4. 极光IM初始化SDK出错
  5. 信用卡还不起会有什么严重后果？
  6. vue 中$index $key 已移除
  7. BZOJ 1609 [Usaco2008 Feb]Eating Together麻烦的聚餐：LIS LDS (nlogn)
  8. C++实现字符串的拼接
  9. 目录操作相关的系统函数
  10. mysql 结果集什么意思_结果集中的mysql“和”逻辑
  11. V8 之旅： 垃圾回收器
  12. cuda event
  13. CSRF 攻击的应对之道
  14. 【李宏毅2020 ML/DL】P73 More about Anomaly Detection
  15. vivo解bl锁_黔隆科技刷机教程酷派Y82820忘记密码刷机解锁降级救砖解屏幕锁账户锁教程...
  16. 360随身WiFi驱动下载
  17. aws ecs 通过efs挂载实现动态更新firelens日志配置
  18. ubuntu下deactivate matlab的操作
  19. 碰撞触发器Trigger
  20. upc 7834 送礼物

热门文章

  1. Pixhawk代码分析-准备
  2. LeetCode每日一题 19. 删除链表的倒数第N个节点
  3. php每个月头一天与最后一天,PHP获取每月第一天与最后一天
  4. Go 语言标准库中 atomic.Value
  5. redis中KEYS替代命令
  6. python3中的while语句、if语句
  7. mysql 出现错误 Duplicate entry for key PRIMARY 解决办法
  8. linux ubuntu fadora,两大主流Linux版本Ubuntu 18.04和Fedora 28的对比
  9. struts2几种result type探究
  10. oracle 五种索引创建