JQuery滾動插件Xslider實現(xiàn)水平滾動和垂直滾動是本文要介紹的內(nèi)容，主要是來學(xué)習(xí)JQuery中插件Xslider的滾動效果，不多說，具體內(nèi)容的實現(xiàn)來看本文詳解。

可以實現(xiàn)上下、左右切換的4種常見滾動效果形式！最少僅需傳入兩個參數(shù)：

$(".productshow").Xslider(  
{   
unitdisplayed:3, numtoMove:3  
}  
);  

寫滾動效果的html結(jié)構(gòu)可能大都是用li列表，滾動時一般是通過li的個數(shù)來指定移動距離，Xslider打破這種思維局限，任何一個對象在這里都能實現(xiàn)滾動效果，而不僅是li列表！為什么？插件的思想是把移動對象網(wǎng)格化看待，通過判斷可視框?qū)挾?、要移動對象的寬度及它?dāng)前的位置（獲取left或top值）來控制滾動，所以你只需指定可視框?qū)挾?、要移動對象的寬度以及每次要移動的單位網(wǎng)格數(shù)，不管你的html結(jié)構(gòu)是li的列表還是純文本字段，都能實現(xiàn)滾動的效果！

效果圖：

功能介紹：

1、可以一次給頁面上綁定同一個類的所有對象實現(xiàn)滾動效果；

2、支持水平和垂直方向的滾動；

3、可實現(xiàn)4種滾動形式：

滾動到對象底部就結(jié)束滾動而不是依然移動指定距離 每次滾動固定距離，滾動到***時不識別對象的底部，而是依然移動固定距離 循環(huán)滾動 自動滾動

使用方法：

 $(".productshow").Xslider({   
 unitdisplayed:3,//必需項;   
 numtoMove:1,//必需項;   
 viewedSize:120, scrollobj:".vscrollobj",   
  unitlen:20, scrollobjSize:  
  $(".vscrollobj").height(), dir:"V",   
  loop:"cycle", speed:500, autoscroll:2000  
  }  
);  

參數(shù)說明：

“.productshow”是要實現(xiàn)滾動效果的對象，該對象要包含一個被移動的對象和左右移動按鈕。如下面的html結(jié)構(gòu)：

<div class="productshow">   
<div class="scrollobj">   
<!--具體內(nèi)容-->   
</div>   
<a href="#left" class="abtn aleft">左移</a>   
<a href="#right" class="abtn aright">右移</a>   
</div>  

“.scrollobj”是被移動的對象，他的position屬性需設(shè)置為absolute或relative，因為腳本是通過改變它的left或top值來實現(xiàn)滾動效果的。左右移動按鈕的class名稱，左按鈕需指定為“.aleft”，右按鈕為“.aright”。在按鈕不可用狀態(tài)下，他的class名稱分別是“.agrayleft”和“.agrayright”。他們html結(jié)構(gòu)的位置不是固定的，只要在“.productshow”下能找到這些對象就行。

另外，給“.productshow”綁定腳本后，頁面上所有的“.productshow”對象都能實現(xiàn)滾動效果；

unitdisplayed：該參數(shù)是必需項。指定可視框內(nèi)可見的最小單元個數(shù)；

numtoMove：該參數(shù)是必需項。指定每次移動最小單元的個數(shù)；

unitlen：該參數(shù)是可選項。指定最小單元的寬度或高度，如果不指定的話，默認(rèn)查找“.productshow”下li的尺寸；

scrollobjSize：該參數(shù)是可選項。移動最長寬或高（就是要移動對象“.scrollobj”***能設(shè)置的left或top值），不傳入則由“.productshow”下li個數(shù)乘以unitlen計算。demo頁面的范例一效果就是通過指定該值來實現(xiàn)；

dir：H | V，該參數(shù)是可選項。指定水平滾動還是垂直滾動，默認(rèn)是’“H”水平滾動，注意是大寫字母；

loop：cycle，該參數(shù)是可選項。指定是否需要循環(huán)滾動，不需要則不要傳入該參數(shù)，注意如果html結(jié)構(gòu)不是li列表的話不能實現(xiàn)循環(huán)滾動的效果；
speed：該參數(shù)是可選項。指定每次移動的速度，單位是毫秒；

autoscroll：該參數(shù)是可選項。指定自動滾動的間隔時間，單位是毫秒，不傳入則不會自動滾動。

Xslider是sean繼 Validform表單驗證插件 之后推出的第二款Jquery插件，效果皆源于平時項目需求，所以非常實用，歡迎各位同行試用并反饋您的意見或建議。

小結(jié)：JQuery滾動插件Xslider支持水平滾動和垂直滾動的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！