Jquery 是一個Javascript的函示庫，基本上不用太多介紹，它變成Web Dveloper必備的技能之一 
套件多到每天逛也逛不完，今天要介紹最近工作有使用到的輪播/跑馬燈套件 
目前網頁設計多半不會塞滿了文字，所以圖片輪播在網頁上還蠻常見的。

使用Jquery Cycle套件只要幾行程式碼就可以完成此功能
http://jquery.malsup.com/cycle/
官網已經有很多Demo的範例，這邊把一些比較會用到的功能做個紀錄：

製作最陽春的輪播
Step 1 加入圖片檔，並塞至一個div標籤裡，內容可以換成Span or input 標籤當成文字跑馬燈 

檢視原始檔複製到剪貼簿列印關於
  1. <div id="slideshow">  
  2.     <img src="img1.png" />  
  3.     <img src="img2.png" />  
  4.     <img src="img3.png" />  
  5. </div>  



Step 2 調整CSS 

檢視原始檔複製到剪貼簿列印關於
  1. <style type="text/css">  
  2. #slideshow   
  3. {    
  4.     top: 0px;   
  5.     left: 0px;    
  6.     float: left;    
  7.     width: 200px;    
  8.     height: 10px;  
  9.     z-index: -5;   
  10. }   
  11. </style>  



Step 3 加入Script 

檢視原始檔複製到剪貼簿列印關於
  1. <!-- <script src="../jquery.cycle.lite.js" type="text/javascript"></script>-->  
  2. <script src="../jquery.cycle.all.js" type="text/javascript"></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function () {   
  5.          $('#slideshow').cycle({    
  6.              fx: "scrollHorz"   
  7.          });   
  8.     });  
  9. </script>  



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

檢視原始檔複製到剪貼簿列印關於
  1. <div id="slideshow">  
  2.     <div id="nav1"></div>  
  3.     <img src="img1.png" />  
  4.     <img src="img2.png" />  
  5.     <img src="img3.png" />  
  6. </div>  



檢視原始檔複製到剪貼簿列印關於
  1. $(document).ready(function () {   
  2.     $('#slideshow').cycle({   
  3.          fx: "scrollHorz",   
  4.          speed: 'fast',   
  5.            timeout: 3000,    
  6.            pager: '#nav',   
  7.            slideexpr: 'img'  
  8.       });   
  9. });  



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

檢視原始檔複製到剪貼簿列印關於
  1. $(document).ready(function () {   
  2.     $('#slideshow').cycle({   
  3.          fx: "scrollHorz",   
  4.          speed: 'fast',   
  5.            timeout: 3000,    
  6.            pager: '#nav',   
  7.            slideexpr: 'img',   
  8.         before: function (currslideelement, nextslideelement, options, forwardflag) {  
  9.               //抓到目前圖片的index    
  10.               $('#txt_index').val($(nextslideelement).index());  
  11.             // do something .....    
  12.         }    
  13.       });   
  14. });  



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

arrow
arrow
    文章標籤
    Jquery Cycle Plugin 部落輪播 輪播功能 vemma vemmabuilder 成功 工作 夥伴 收入 加入 在家 信件 lt 剪貼簿 slideshow script javascript 套件
    全站熱搜

    vemma維瑪珉珉Min 發表在 痞客邦 留言(0) 人氣()