• 功能强大的滚动播放插件JQ-Slide

    查看效果：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>&#8249;</span>
244                         <B class="corner"></B>
245                     </a>
246                     <a class="next" href="#">
247                         <b class="corner"></b>
248                         <span>&#8250;</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="&#39;browser.opera&#39; 为空或不是对象">&#39;browser.opera&#39; 为空或不...</a></li>
291 <li><a href="http://keleyi.com/a/bjac/h864ixme.htm" title="&#39;$.browser.msie&#39; 为空或不是对象">&#39;$.browser.msie&#39; 为空或...</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
  • 相关阅读:
    后端注册接口完善
    编写注册接口
    Git 多人开发及常见问题
    Git 常用命令
    GIT 的安装及配置SSH
    ORM查询方法(整理)
    HTTP的系列理解与整理
    Unity C# 反射
    C# 中的委托和事件
    Unity C# 运用 GetSaveFileName() 导出Excel文件
  • 原文地址：https://www.cnblogs.com/jihua/p/JQSlide.html
Copyright © 2020-2023  润新知