生活随笔
收集整理的這篇文章主要介紹了
功能强大的滚动播放插件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>‹
</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的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
