Blueberry 實際執行畫面

隨著智能手機和平板電腦的普及網絡佈局已經成為現代網頁設計的重要組成部分。所以展示部分的功能也變得比較重要 ，Blueberry 是一個實驗性 jQuery 框架下的圖片展示櫃套件，在他的展示中展示櫃中的圖片可隨螢幕大小做細部的調整，這可以幫助設計師對大部分的解析度都能夠有比較完美的呈現。

使用方法：
第一步 先載入程式所需要的檔案
//blueberry 的 CSS 設計檔案
<link rel="stylesheet" href="blueberry.css" />
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//blueberry 的主程式碼
<script src="jquery.blueberry.js"></script>


第二步 網頁的HTML 部分設計
<div class="blueberry">
  <ul class="slides">
    <li><img src="img/slide1.jpg" /></li>
    <li><img src="img/slide2.jpg" /></li>
    <li><img src="img/slide3.jpg" /></li>
    <li><img src="img/slide4.jpg" /></li>
  </ul>
<!-- 頁數可自行設計.也有內建可不輸入 -->
  <ul class="pager">
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>

第三步 加入 JavaScript 程式碼
$(function() {
$('.blueberry').blueberry();
});

附上程式可修改參數

參數	預設	說明
interval	5000	換下一張的間隔時間
duration	500	換圖片的動畫時間
lineheight	1	設定行高
hoverpause	false	滑鼠滑過是否停止撥放
pager	true	是否使用預設的換頁標籤
keynav	true	是否可使用鍵盤

作者網站：http://marktyrrell.com/labs/blueberry/
檔案大小：16.6 KB(包含範例)
檔案下載：http://marktyrrell.com/labs/blueberry/jquery.blueberry.zip
檔案備份：下載