功能强大的滚动播放插件JQ-Slide
查看效果：http://keleyi.com/keleyi/phtml/jqplug/4.htm
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>
最新请参考：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