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