# 撰寫跑馬燈/廣告輪播的好工具：jQuery Cycle Plugin

[jQuery](http://www.jquery.com/) 是我最常用的 JavaScript Library，而且[外掛程式](http://jquery.com/plugins/)超多，有空的人是可以多上去看看有什麼新玩意，保證有許多驚喜！我大約是在一年前得知有 [jQuery Cycle Plugin](http://malsup.com/jquery/cycle/) 這個 jQuery 外掛套件吧，當時為了找一個可以「跨瀏覽器」的廣告輪播套件找了好久，也試用了好幾套，不過大部分廣告輪播或跑馬燈的 JavaScript Library 都不盡理想，最後才選擇用 [jQuery Cycle Plugin](http://malsup.com/jquery/cycle/) 來做為跑馬燈/廣告輪播的撰寫工具。

想看 [jQuery Cycle Plugin](http://malsup.com/jquery/cycle/) 執行效果只要連上官網就可以看到了，至於如何使用那更是容易啦，先介紹一個簡單的範例：

假設有三張圖片你希望能依序輪流顯示：

```
<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 
 });
```

整體來說就是這個簡單，當然你也可以使用較複雜的效果或設定，完整的選項說明可以在[這裡](http://malsup.com/jquery/cycle/options.html)找到。

底下是官網上提供的示範與程式碼範例：

-   [Beginner Demos](http://malsup.com/jquery/cycle/begin.html)
-   [Intermediate Demos (Part 1)](http://malsup.com/jquery/cycle/int.html)
-   [Intermediate Demos (Part 2)](http://malsup.com/jquery/cycle/int2.html)
-   [Advanced Demos (Part 1)](http://malsup.com/jquery/cycle/adv.html)
-   [Advanced Demos (Part 2)](http://malsup.com/jquery/cycle/adv2.html)
-   [Even More Demos](http://malsup.com/jquery/cycle/more.html?v2.23) (lots of additinal demos can be found here)