featureCarousel.js 3d輪播圖外掛程式

標籤：add   enter   cli   圖片   中心   舉例   oop   隱藏   http   

jQuery Feature Carousel 外掛程式是國外的一比較優秀的旋轉木馬圖片外掛程式。 點擊這裡進入原文。

 

外掛程式特點：

1.處理div的3d旋轉木馬效果。

2.支援一個中心，2個側面的功能

3.中心地區可點擊

4.顯示隱藏文本功能（可以使用css顯示在圖片的任何位置）

5.可以修改速度，效果，等很多的參數。

6.支援 Chrome,FireFox,Safari和IE6 +瀏覽器。

7.需要 jquery v1.3+

8.支援圖片預先載入

 

怎麼使用：

1.引入jQuery v1.3+和 carousel.js檔案

2.引入相應的css檔案

3.格式化你的html。

4.如下啟用你的carousel.js

 

[html] view plain copy 

1. <script type="text/javascript">  
2.   $(document).ready(function () {  
3.     $("#carousel").featureCarousel({  
4.         // include options like this:  
5.         // (use quotes only for string values, and no trailing comma after last option)  
6.         // option: value,  
7.         // option: value  
8.     });  
9.   });  
10. </script>  

 

配置參數：

名稱	描述	類型	預設值
largeFeatureWidth	3種情況，“0”意思是寬度按原始大小顯示，“0” “1”之間實際寬度原始寬度乘以此值，大於“1”，可以自訂寬度	integer	0
largeFeatureHeight	同上，為圖片的高度	integer	0
smallFeatureWidth	3種情況，“0”意思是寬度按原始大小顯示，“0” “1”之間實際寬度原始寬度乘以此值，大於“1”，可以自訂寬度	integer	0.5
smallFeatureHeight	同上，改為高度	integer	0.5
topPadding	距離外圍容器上方padding值	integer	20
sidePadding	距離外圍容器左右padding值	integer	50
smallFeatureOffset	兩側內容舉例容器的舉例	integer	50
startingFeature	放在中心的序號	integer	1
carouselSpeed	完成一個旋轉木馬的時間	integer	1000
autoPlay	大於0的話，為旋轉木馬的運行間隔時間。等於0表示不自動運行	integer	4000
pauseOnHove	滑鼠放上去暫訂	boolean	true
OnHover	滑鼠放上去停止	boolean	false
stoptrackerIndividual		boolean	true
trackerSummation		boolean	true
preload		boolean	true
displayCutoff		integer	0
animationEasing	緩衝效果（和easing 外掛程式配合使用）	string	‘swing‘
leftButtonTag	左滾動的按鈕	string	‘#carousel-left
rightButtonTag	右滾動的按鈕	string	‘#carousel-right‘
captionBelow	標題在圖片下方	boolean	false
movedToCenter	移入中心觸發的回呼函數	function	$.noop
leavingCenter	偏離中心觸發的回呼函數	function	$.noop
clickedCenter	點擊中間的連結觸發的回呼函數	function	$.noop

featureCarousel.js 3d輪播圖外掛程式