JQuery Jcarousel插件實現橫向無縫圖片滾動
JQuery Jcarousel插件實現橫向無縫圖片滾動是本文要介紹的內容，主要是了解利用JQuery來實現滾動效果， jCarousel操作jquery圖片產品展示插件可以用來展示產品圖片的jquery插件。
jCarousel是個非常好看又好用的內容滾動切換插件，可以實現按序水平或垂直方向的內容列表的切換。滾動切換的內容可以是靜態的HTML內容，也可以是JS的對象列表，也可以是利用AJAX技術動態載入的內容。
jcarousel 使用方法 使用此插件，需要在<head>標簽內引入jQuery庫，jCarousel源文件和CSS樣式等：
- <script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js">
- </script><script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js">
- </script><link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
- <link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
- jCarousel在HTML文檔中使用一個非常簡單的HTML標記結構：
- <ul id="mycarousel">
- <!-- The content goes in here -->
- </ul>
jCarousel自動生成需要的HTML標記內容。class屬性標明jCarousel使用的”name”名稱的外觀。應用jCarousel，需要在<head>標記內增加以下代碼：
- <script type="text/javascript">jQuery(document).ready(function() {
- jQuery('#mycarousel').jcarousel({
- // Configuration goes here
- })
- ;
- });
- </script>
jCarousel可以接受很多配置選項，在后面會詳細說明。 jCarousel初始化成功后，生成的DOM結構如下所示：
- <div>
- <div>
- <div disabled="disabled">
- </div>
- <div>
- </div>
- <div>
- <ul>
- <li>First item</li>
- <li>Second item</li>
- </ul>
- </div>
- </div>
- </div>
你可以發現自動生成了一些有class屬性的元素。你可以自己定義這些對應的class的樣式。注： "jcarousel-skin-name"外觀class名稱被自動從<ul>上變動到了頂層的<div>元素上。在<div>中的第一個<div>元素表示一個不可用的按鈕，第二個<div>元素是一個可用的按鈕。
不可用按鈕有一個disabled屬性（實際上對<div>元素沒有影響，你可以照常使用按鈕元素），額外的jcarousel-prev-disabled(或者jcarousel-next-disabled)表示樣式。在列表中的<li>元素都有jcarousel-item-n的樣式，通過n表示在列表中的位置。class的名稱都可以復用，如<ul>表示一個水平的carousel。動態內容載入使用itemLoadCallback回調方法作為一個配置選項，你可以實現動態創建<li>元素。
- <script type="text/javascript">
- jQuery(document).ready(function() {
- jQuery('#mycarousel').jcarousel({
- itemLoadCallback: itemLoadCallbackFunction
- });});
- </script>
itemLoadCallback是個JavaScript函數，當carousel載入了列表內容時被執行。使用時需要傳遞兩個參數：載入列表的carousel實例對象和指示當前carousel狀態的標記（'init','prev'或者'next'）。
- <script type="text/javascript">
- function itemLoadCallbackFunction(carousel, state){
- for (var i = carousel.first;
- i <= carousel.last; i++) {
- // Check if the item already exists
- if (!carousel.has(i)) {
- // Add the item
- carousel.add(i, "I'm item #" + i);
- }
- }};
- </script>
jCarousel包含一個方便的add()方法，用于創建對應編號的元素和元素中的innerHTML字符串內容。如果元素已經存在，它只是更新元素的innerHTML字符串。你可以使用carousel.first和carousel.last變量來訪問第一個和最后一個可見元素的編號值。 配置選項 jCarousel接受以下選項來控制carousel的表現和行為。從屬性、類型、默認值、描述。
- vertical bool false
指定carousel是水平還是垂直方向滾動。
- start integer 1
開始的元素編號。
- offset integer 1
初始化后第一個可見的元素編號。
- size integer
如果size屬性沒指定，則為<li>元素的個數 元素的個數。
- scroll integer 3
每次滾動切換的元素數量。
- visible integer null
如果設置此項，元素的寬度和高度值將根據區域的寬度和高度值來重新計算，以顯示此數量的元素。
- animation mixed “fast”
滾動效果的速度(“slow”或者”fast”)，也可以是毫秒的整數(參見 jQuery Documentation)。如果設置為0，關閉切換效果。
- easing string null
你想使用的緩沖效果的名字 (參見 jQuery Documentation).
- auto integer 0
指定每隔多少秒自動滾動內容。如果設置為0(默認值)將關閉自動切換。
- wrap string null
表示是否將第一個和最后一個元素實現連接效果。選項值可以是"first", "last"或者 "both"。如果設置為null，默認關閉連接效果。 你也可以設置"circular"選項實現循環效果。例子 Circular carousel 演示如何實現此效果。
- initCallback function null
在初始化carousel后調用的JavaScript函數。包含兩個參數：調用函數的carousel實例對象和carousel的初始化狀態(init, reset 或者reload)。
- itemLoadCallback function null
在carousel動態載入內容后調用的JavaScript函數。包含兩個參數：調用函數的carousel實例對象和carousel的動作狀態(prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemFirstInCallback function null
當 某個元素成為carousel顯示范圍的第一個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對 象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemFirstOutCallback function null
當某個元素不再是carousel顯示范圍的第一個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemLastInCallback function null
當某個元素成為carousel顯示范圍的最后一個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemLastOutCallback function null
當某個元素不再是carousel顯示范圍的最后一個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemVisibleInCallback function null
當某個元素成為carousel顯示范圍的某個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- itemVisibleOutCallback function null
當某個元素不再是carousel顯示范圍的某個元素時調用的JavaScript函數(在滾動效果之后)。需要四個參數：調用函數的實例對象，<li>對象本身，元素在列表中中序號，以及carousel的動作狀態 (prev, next or init)。你還可以傳遞一個或兩個函數的列表，分別表示切換前和切換后的動作。 itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
- buttonNextCallback function null
當’next’按鈕狀態改變時調用的JavaScript函數。方法的返回值用于控制’next’按鈕可用還是不可用。需要三個參數：調用函數的實例對象，按鈕控件元素和該按鈕是否可用的標記。
- buttonPrevCallback function null
當’previous’按鈕狀態改變時調用的JavaScript函數。方法的返回值用于控制’previous’按鈕可用還是不可用。需要三個參數：調用函數的實例對象，按鈕控件元素和該按鈕是否可用的標記。
- buttonNextHTML string <div></div>
自動生成的next按鈕的HTML標記。如果設置為空，不創建next按鈕。
- buttonPrevHTML string <div></div>
自動生成的prev按鈕的HTML標記。如果設置為空，不創建prev按鈕。
- buttonNextEvent string “click”
指定觸發next操作的事件名。
- buttonPrevEvent string “click”
指定觸發prev操作的事件名。
兼容性 jCarousel支持以下瀏覽器：
- Internet Explorer 6 (PC)
- Internet Explorer 7 (PC)
- FireFox 1.5.0.6 (PC/Mac/Linux)
- Opera 9.01 (PC/Mac)
- Safari 2.0.4 (Mac)
- Safari 3.1.0 (PC)
- Konqueror 3.4.0 (Linux)
小結：JQuery Jcarousel插件之橫向無縫圖片滾動的內容介紹完了，希望通過本文的學習能對你有所幫助！
