featureCarousel.js 3d輪播圖插件

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

 

<script type="text/javascript">
  $(document).ready(function () {
    $("#carousel").featureCarousel({
        // include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        // option: value,
        // option: value
    });
  });
</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