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

DEMO 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/begin.html
http://malsup.com/jquery/cycle/int.html
http://malsup.com/jquery/cycle/int2.html
http://malsup.com/jquery/cycle/adv.html
http://malsup.com/jquery/cycle/adv2.html
http://malsup.com/jquery/cycle/more.html?v2.23

參考網址 http://blog.miniasp.com/post/2008/08/Writing-Marquee-and-Banner-Rotate-with-jQuery-Cycle-Plugin.aspx