Supersized是一款基于jQuery的功能強大(dà)的圖片切換插件，可(kě)以應用在一些(xiē)大(dà)型圖片站(zhàn)的項目中，該插件可(kě)以将圖片等比例拉伸充滿整個(gè)浏覽器(qì)屏幕，支持滑動、淡入淡出等多(duō)種圖片切換效果。

Supersized特性：

• 自動等比例調整圖片并填充整浏覽器(qì)個(gè)屏幕。
• 循環展示圖片，支持滑動和(hé)淡入淡出等多(duō)種圖片切換效果。
• 導航按鈕，支持鍵盤方向鍵導航。

XHTML

	 



	



	



	



	
	

		
		

			/ 
		

		

			
		

		

			   
		

	

XHTML結構代碼中，#loading用來(lái)顯示加載圖片動畫(huà)的；#supersized用來(lái)顯示所要展示的圖片；#prevthumb和(hé)#nextthumb用來(lái)展示上(shàng)一張和(hé)下一張的縮略圖；#controls-wrapper控制(zhì)條，放置控制(zhì)按鈕，以及圖片标題內(nèi)容等。

記得(de)在XHTML頁面裏引入jquery庫和(hé)Supersized插件以及CSS文件。

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(); 
});

參數(shù)說明(míng)：

vertical_center：是否讓圖像垂直居中，如果為(wèi)0，則圖像為(wèi)頂端對齊。

slideshow：是否顯示展示工具條，包括标題、圖片數(shù)字和(hé)導航按鈕。

navigation：是否展示導航按鈕。

thumbnail_navigation：為(wèi)1時(shí)可(kě)以通(tōng)過單擊縮略圖導航切換圖片，為(wèi)0時(shí)，縮略圖不顯示。

pause_hover：是否鼠标滑向圖片時(shí)暫停圖片切換。

transition：圖片切換效果，0-無，1-淡入淡出，2-向上(shàng)滑動，3-向右滑動，4-向下滑動，5-向左滑動。

slide_counter：是否顯示切換圖片的數(shù)字。

slide_captions：是否顯示圖片标題。

slide_interval：圖片切換間(jiān)隔時(shí)間(jiān)（毫秒(miǎo)）

slides：所切換的圖片集合，包括圖片地址image，圖片标題title，圖片鏈接url。

autoplay：是否自動播放。

transition_speed：切換速度，默認750。

keyboard_nav：是否支持鍵盤操作(zuò)切換。

random：是否随機切換圖片