Background image tweening with jQuery 背景圖片轉換中

Background image tweening with jQuery 一個體積小使用非常簡單方便的背景變換套件，基於 jQuery 框架開發能夠保持 DOM 整潔並且有平滑的過度動畫效果。能夠展示圖片又不影響到其他的網頁元素動作，大多用於網頁最上方橫幅圖片展示。

使用方法：
第一步 載入 Background image tweening 需要使用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Background image tweening 的主程式碼 -->
<script type="text/javascript" src="jquery.bgImageTween.js"></script>

第二步 設定 HTML 背景圖片展示部分
<div id="tween" style="color:white;width:460px;height:320px;">
  <small>可插入任何的內容</small>
</div>

第三步 寫入 JavaScript 讓 Background image tweening 初始化
$(function() {
      $('#tween').bgImageTween(['/offshots/bgImageTween/509643_21938446.jpg',
                                '/offshots/bgImageTween/291785_2020.jpg',
                                '/offshots/bgImageTween/286533_3987.jpg',
                                '/offshots/bgImageTween/243773_4590.jpg',
                                '/offshots/bgImageTween/1308342_69981597.jpg'], 3000, 2000);
});

也可使用不同的方法來初始化
$(function(){
     var images = ['/your.jpg', '/set.jpg', '/of.jpg', '/images.jpg'];
     var showtime = 3000;       // 換圖片的間隔時間
     var transitiontime = 2000; // 圖片轉換的過渡時間
     $('#tween').bgImageTween(images, showtime, transitiontime );
});

作者網站：http://soxer.mutsu.org/offshots/bgImageTween
檔案大小：1.02 KB
檔案下載：http://soxer.mutsu.org/downloads/jquery.bgImageTween.tar.bz2
備份下載：下載