[Jquery]使用Cycle Plugin輕鬆做出輪播功能

Jquery 是一個Javascript的函示庫，基本上不用太多介紹，它變成Web Dveloper必備的技能之一
套件多到每天逛也逛不完，今天要介紹最近工作有使用到的輪播/跑馬燈套件
目前網頁設計多半不會塞滿了文字，所以圖片輪播在網頁上還蠻常見的，
使用Jquery Cycle 套件只要幾行程式碼就可以完成此功能
官網已經有很多Demo的範例，這邊把一些比較會用到的功能做個紀錄： 
製作最陽春的輪播
Step 1 加入圖片檔，並塞至一個div標籤裡，內容可以換成Span or input 標籤當成文字跑馬燈

<div id="slideshow">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

Step 2 調整CSS

<style type="text/css">
#slideshow 
{  
    top: 0px; 
    left: 0px;  
    float: left;  
    width: 200px;  
    height: 10px;
    z-index: -5; 
} 
</style>

Step 3 加入Script

<!-- <script src="../jquery.cycle.lite.js" type="text/javascript"></script>-->
<script src="../jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () { 
         $('#slideshow').cycle({  
             fx: "scrollHorz"  
         }); 
    });
</script>

是的，就是那麼容易，輪播功能已經完成了，
fx參數是切換的效果，如果不用太多炫麗的效果，
只要載入lite檔就夠了畢竟cycle.all.js檔會比較肥大，
切換效果參數的設定可以至此頁面參考，
加入分頁切換功能
圖片輪播完成了，但圖片很多總不能叫使用者傻傻等吧!
也是只要加入個div，設定幾個餐數就可以完成!

<div id="slideshow">
    <div id="nav1"></div>
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

$(document).ready(function () { 
    $('#slideshow').cycle({ 
         fx: "scrollHorz", 
         speed: 'fast', 
           timeout: 3000,  
           pager: '#nav', 
           slideexpr: 'img'
      }); 
});

如果要搭配Ajax去抓資料
如要使用Ajax，去做局部更新的效果
此套件也有很多事件可以控制：

$(document).ready(function () { 
    $('#slideshow').cycle({ 
         fx: "scrollHorz", 
         speed: 'fast', 
           timeout: 3000,  
           pager: '#nav', 
           slideexpr: 'img', 
        before: function (currslideelement, nextslideelement, options, forwardflag) {
              //抓到目前圖片的index  
              $('#txt_index').val($(nextslideelement).index());
            // do something .....  
        }  
      }); 
});

以上，還有很多功能可以去官網玩看看!!