jQuery實現圖片播放器外掛程式

jquery 圖片播放器外掛程式

 

文章原創，歡迎轉載，轉載請註明出處：http://blog.csdn.net/xxd851116

 

作者：笑的自然
 我的部落格：http://blog.csdn.net/xxd851116
 我的郵箱: xingxiudong@gmail.com

下載：
 項目地址：http://code.google.com/p/imgplayer/
 曆史下載: http://code.google.com/p/imgplayer/downloads/list
 jquery.fn.imgplayer.js最新：http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.js
 jquery.fn.imgplayer.min.js最新：http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js
 svn: http://imgplayer.googlecode.com/svn/trunk/ [read-only]

說明：
 1. 項目編碼為GBK
 2. 目前播放模式支援 1:溶解，2:掛曆模式，3:滑動(從左至右),4:滑動(從上到下),5:滑動(從下到上),6:滑動(從右至左)，善不支援隨機模式
 3. 在IE6，IE8，FF下測試通過
 4. 支援任意數量圖片，使用簡單
 5. 考慮到圖片佔用空間較多，樣本中圖片來自網路，離線狀態下需要自訂圖片
 由於採用純JavaScript實現，動畫效果比較簡單，目前善不支援全部隨機播放模式，希望廣大編程愛好者提出建議和不足。
 
參數：
 imgCSS  : 使用者自訂圖片樣式
 transition : 播放模式選項 1:溶解，2:掛曆模式，3:滑動(從左至右),4:滑動(從上到下),5:滑動(從下到上),6:滑動(從右至左),23:隨機
 width  : 播放器div容器的寬度
 height  : 播放器div容器的高度
 time  : 圖片播放間隙時間,單位：毫秒
 duration : 圖片播放時間,單位：毫秒
 onStart  : 開始播放時執行的函數
 onStop  : 停止播放時執行的函數
 onShow  : 每頁圖片顯示時執行的函數
 onHide  : 每頁圖片隱藏時執行的函數

使用樣本:
 1. 容器代碼
  <div id="imgContainer" style="margin-left:auto;margin-right:auto;margin-top:5px;display:none;">
   <a href="" target="_blank" title=""><img src="" title="" /></a>
   ......
  </div>
 2. 匯入jquery包(http://code.jquery.com/jquery-1.4.2.min.js)
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 3. 匯入imgplayer外掛程式(http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js)
  <script type="text/javascript" src="jquery.fn.imgplayer.min.js"></script>
 4. 綁定播放函數(參數說明詳見上述)
  var player = $("#imgContainer").playImgs({
   imgCSS : {'width' : '800px', 'height' : '600px'},
   width : '800px',
   height: '600px',
   time : '5000',
   transition : 1,
   duration : 2000
  }).start();
 

更新日誌：
 v1.2(2010-02-24):
  1.修改了標題列右側衝出容器的bug
  2.添加了duration參數，可自訂圖片動畫效果時間
 
 v1.1(2009-09-23):
  1.修改了滑鼠停留播放器和序號標籤片繼續播放的問題