jquery 的3D Carousel插件參數說明

 

這個插件大家都很熟悉了，但是在網上找了很久找不到相關的資料，只有自己琢磨研究了一下。有些參數一眼都可以看出意思，在此我只說一下每個圖片要想帶一些擴展信息怎么處理。

1：首先需要創建一個ul對象，然后里面每一個li對象中的內容就是一個旋轉的圖形，第一個需要注意的就是img對象必須放在最前面，然后后面才跟其他內容。

<li>
  <img src="images/content1.png" alt=""/>
  <div class="tooltip">提示信息</div>
  <data class="url">Real.aspx</data>
  <data class="linkTarget">_self</data>
</li>

　　如上所寫，img是選擇的圖片，tooltip是鼠標移動到圖片上的提示信息，后面兩個data節點的內容是我需要自定義的內容，請注意這里面必須定義class，然后在后面要使用該值時就使用class名稱的屬性名。

2：創建一個carousel對象

$("#carousel").carousel({
                    width: 400,       //對象寬度 
                    height: 200,      //對象高度
                    itemWidth: 20,
                    posterWidth: 340, //當前顯示的圖片的寬度
                    posterHeight: 200, //當前顯示的圖片的高度
                    horizontalRadius: 370, //圖片左右滾動的半徑
                    verticalRadius: 100,   //圖片上下滾動的半徑
                    resize: false,
                    mouseScroll: false,
                    mouseDrag: true,
                    scaleRatio: 0.4,
                    scrollbar: false,
                    autoScroll: true,
                    tooltip: true,
                    itemClick: onItemClick,  //自定義每個圖片的點擊事件
                    mouseWheel: true,
                    mouseWheelReverse: true
                });
                

3：選擇圖片點擊事件說明

function onItemClick(evt) {
                    window.location.href = evt.data.url;
                }

　　在此特別說明：點擊事件輸入的evt對象，evt.data就是可以自定義的數據， 該控件默認有屬性名：path,link,linkTarget,tooltip。屬性名就是class名稱，在火狐或chrome中定義了link和linkTarget屬性，會自動彈出鏈接窗口。但是在IE8中沒有。因此，我自定義了一個url的地址。在Click事件中進行自行處理。