2013年1月15日 星期二

[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 .....  
        }  
      }); 
});

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

















沒有留言:

張貼留言