：：jQuery：：中文官網
jQuery 這次的試用是我的第一次，話說第一次總是比較痛，這次測試上也花了
不少時間，但畢竟是別人寫好的套件，【沒吃過豬肉也要看過豬走路】老實說
Javascript 我也不太行，使用上僅限於基本功，要自行開發一個Javascript 完整
功能我還差的遠嚕，更不用說看jQuery 程式碼，跟看天書有啥差別，但不會開
發總要會應用，不然也不用出來混了。
【jQuery Cycle Plugin】官網
這是這次我主要需要的圖片過場效果，使用上相當方便，只需修改宣告
素質，就能改變過場效果，要使用jQuery Cycle Plugin需先下載jQuery
的主程式，有分三類(請至jQuery官網下載)：
1‧下載 jQuery 1.2.6 (16kb, 使用Gzip壓縮與最小化處理 )
2‧下載 jQuery 1.2.6 (97kb, 未壓縮的)
3‧下載 jQuery 1.2.6 (30kb, 精簡版)
jQuery Cycle Plugin程式也一樣分三類：
1‧jQuery Cycle Plugin with all transitions - compressed (12 KB)
2‧jQuery Cycle Plugin with all transitions - minified (17 KB)
3‧jQuery Cycle Plugin with all transitions - uncompressed (34 KB)
jQuery的路徑：
﹂ _WWW_
﹂ include
﹂ javascript
﹂ jQuery
﹂ jquery-1.2.6.min.js
﹂ jquery.cycle.all.min.js
1‧下載jQuery 及 jQuery Cycle Plugin ，自行選擇所需要的版本。
2‧Include 套件
<script type="text/javascript"
src="include/javascript/jQuery/jquery-1.2.6.min.js"></script>
<script type="text/javascript"
src="include/javascript/jQuery/jquery.cycle.all.min.js"></script>
3‧以範例 Pager demo with an extra link to trigger direct navigation
為例， jQuery Cycle Plugin的執行程式碼，將底下程式碼至於
<head></head>裡。
<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
fx: 'turnDown', //過場效果
speed: 'fast', //轉換速度
timeout: 3000, //停留時間
pager: '#nav', //頁碼
pagerEvent: 'mouseover', //滑鼠動作判斷
pagerAnchorBuilder: function(idx, slide) {
return '#nav li:eq(' + (idx) + ') a';
}
});
$('#direct').click(function() {
$('#nav li:eq(2) a').triggerHandler('click');
return false;
});
});
</script>
4‧css樣式，將底下程式碼至於<head></head>裡。
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block;
border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
5‧ #nav裡的圖片可改為文字頁碼，將底下程式碼至於<body>
</body>裡。
<ul id="nav">
<li><a href="#" target="_blank">
<img src="images/beach1.jpg" width="50" height="50" />
</a></li>
<li><a href="#" target="_blank">
<img src="images/beach2.jpg" width="50" height="50" />
</a></li>
<li><a href="#" target="_blank">
<img src="images/beach3.jpg" width="50" height="50" />
</a></li>
<li><a href="#" target="_blank">
<img src="images/beach4.jpg" width="50" height="50" />
</a></li>
</ul>
<div id="slideshow" class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
<img src="images/beach4.jpg" width="200" height="200" />
</div>
留言列表
