jQuery插件--圖片輪換

今天利用jQuery實現了一個圖片輪換插件，支持樣式配置，支持彈出浮層查看單個圖片

單擊數字鏈接更換圖片，鼠標停留到上面圖片上暫停自動輪換

 

看看效果：

 

圖1：默認配置時的效果

 圖2：默認配置時的效果


 圖3：單擊圖片，可以彈出浮層查看圖片


 

 

配置項說明：

 

var options = {
                                //寬度
		'width':400,
		//高度
		'height':250,
		//背景顏色
		'backgroundColor':'#CCCCFF',
		//邊框寬度
		'borderWidth':5,
		//邊框顏色
		'borderColor':'black',
		//邊框樣式
		'borderStyle':'solid',
		//圖片輪換速度
		'speed':'3s',
		//圖片淡出速度
		'fadeOutSpeed':300,
		//圖片淡入速度
		'fadeInSpeed':200,
		//圖片隊列的背景顏色
		'queueBackgroundColor':'black',
		//圖片隊列高度
		'queueHeight':25,
		//圖片隊列的透明漸變的樣式 ，具體請參考CSS濾鏡漸變樣式說明
		'queueStyle':1,
		//圖片隊列的開始透明度
		'queueOpacity':30,
		//圖片隊列的結束透明度，當queueStyle!=0的情況下用到
		'queueFinishOpacity':80,
		//圖片隊列標題的字體顏色
		'queueTitleColor':'red',
		//圖片隊列標題的字體大小
		'queueTitleFontSize':'16px',
		//圖片隊列標題的字體粗細
		'queueTitleFontWeight':'normal',
		//圖片隊列連接字體顏色
		'queueLinkColor':'white',
		//圖片隊列連接鼠標進入時字體顏色
		'queueHoverColor':'orange'

}

 

 

改變一下配置看看效果：

 

 

 實例下載地址：

 

http://download.csdn.net/source/2684034