Supersized特性：
- 自動等比例調整圖片並填充整瀏覽器個屏幕。
- 循環展示圖片，支持滑動和淡入淡出等多種圖片切換效果。
- 導航按鈕，支持鍵盤方向鍵導航。
XHTML
<div id="loading"> </div>
<div id="supersized"></div>
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<div id="controls-wrapper">
<div id="controls">
<div id="slidecounter">
<span class="slidenumber"></span>/<span class="totalslides"></span>
</div>
<div id="slidecaption"></div>
<div id="navigation">
<img id="prevslide" src="images/back_dull.png"/>
<img id="pauseplay" src="images/pause_dull.png"/>
<img id="nextslide" src="images/forward_dull.png"/>
</div>
</div>
</div>
XHTML結構代碼中，#loading用來顯示加載圖片動畫的；#supersized用來顯示所要展示的圖片；#prevthumb 和#nextthumb用來展示上一張和下一張的縮略圖；#controls-wrapper控制條，放置控制按鈕，以及圖片標題內容等。
記得在XHTML頁面里引入jQuery庫和Supersized插件以及CSS文件。
<script type="text/JavaScript" src="jquery.min.js"></script>
<script type="text/javascript" src="supersized.3.0.js"></script>
<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
jQuery
$(function(){
$.fn.supersized.options = {
vertical_center: 1,
slideshow: 1,
navigation: 1,
thumbnail_navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000,
slides : [
{image : 'slides/tower.jpg', title : 'City Clock Tower',
url : 'http://www.helloweba.com'},
{image : 'slides/fence.jpg', title : 'Canal Park Fence',
url : 'http://www.helloweba.com/blog.html'},
{image : 'slides/tracks.jpg', title : 'Old Train Tracks',
url : 'http://www.helloweba.com/case.html'}
]
};
$("#supersized").supersized();
});
參數說明：
vertical_center：是否讓圖像垂直居中，如果為0，則圖像為頂端對齊。
slideshow：是否顯示展示工具條，包括標題、圖片數字和導航按鈕。
navigation：是否展示導航按鈕。
thumbnail_navigation：為1時可以通過單擊縮略圖導航切換圖片，為0時，縮略圖不顯示。
pause_hover：是否鼠標滑向圖片時暫停圖片切換。
transition：圖片切換效果，0-無，1-淡入淡出，2-向上滑動，3-向右滑動，4-向下滑動，5-向左滑動。
slide_counter：是否顯示切換圖片的數字。
slide_captions：是否顯示圖片標題。
slide_interval：圖片切換間隔時間（毫秒）
slides：所切換的圖片集合，包括圖片地址image，圖片標題title，圖片鏈接url。
autoplay：是否自動播放。
transition_speed：切換速度，默認750。
keyboard_nav：是否支持鍵盤操作切換。
random：是否隨機切換圖片