撰寫跑馬燈/廣告輪播的好工具：jQuery Cycle Plugin
jQuery 是我最常用的 JavaScript Library，而且外掛程式超多，有空的人是可以多上去看看有什麼新玩意，保證有許多驚喜！我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧，當時為了找一個可以「跨瀏覽器」的廣告輪播套件找了好久，也試用了好幾套，不過大部分廣告輪播或跑馬燈的 JavaScript Library 都不盡理想，最後才選擇用 jQuery Cycle Plugin 來做為跑馬燈/廣告輪播的撰寫工具。
想看 jQuery Cycle Plugin 執行效果只要連上官網就可以看到了，至於如何使用那更是容易啦，先介紹一個簡單的範例：
假設有三張圖片你希望能依序輪流顯示：
<div 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" /> </div>
然後先定義這一區的 CSS
.pics { height: 232px; width: 232px; padding: 0; margin: 0; } .pics img { padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 200px; height: 200px; top: 0; left: 0; }
然後只要寫一行 JavaScript 就完成了整個廣告輪播的工作：
$('.pics').cycle('fade');
若你想調整輪播的速度（假設每 5 秒鐘換一張圖）
$('.pics').cycle({ fx: 'fade', speed: 5000 });
整體來說就是這個簡單，當然你也可以使用較複雜的效果或設定，完整的選項說明可以在這裡找到。
底下是官網上提供的示範與程式碼範例：
jQuery 是我最常用的 JavaScript Library，而且外掛程式超多，有空的人是可以多上去看看有什麼新玩意，保證有許多驚喜！我大約是在一年前得知有 jQuery Cycle Plugin 這個 jQuery 外掛套件吧，當時為了找一個可以「跨瀏覽器」的廣告輪播套件找了好久，也試用了好幾套，不過大部分廣告輪播或跑馬燈的 JavaScript Library 都不盡理想，最後才選擇用 jQuery Cycle Plugin 來做為跑馬燈/廣告輪播的撰寫工具。
想看 jQuery Cycle Plugin 執行效果只要連上官網就可以看到了，至於如何使用那更是容易啦，先介紹一個簡單的範例：
假設有三張圖片你希望能依序輪流顯示：
<div 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" /> </div>
然後先定義這一區的 CSS
.pics { height: 232px; width: 232px; padding: 0; margin: 0; } .pics img { padding: 15px; border: 1px solid #ccc; background-color: #eee; width: 200px; height: 200px; top: 0; left: 0; }
然後只要寫一行 JavaScript 就完成了整個廣告輪播的工作：
$('.pics').cycle('fade');
若你想調整輪播的速度（假設每 5 秒鐘換一張圖）
$('.pics').cycle({ fx: 'fade', speed: 5000 });
整體來說就是這個簡單，當然你也可以使用較複雜的效果或設定，完整的選項說明可以在這裡找到。
底下是官網上提供的示範與程式碼範例：
- Beginner Demos
- Intermediate Demos (Part 1)
- Intermediate Demos (Part 2)
- Advanced Demos (Part 1)
- Advanced Demos (Part 2)
- Even More Demos (lots of additinal demos can be found here)