JQuery滾動插件Xslider實現水平滾動和垂直滾動是本文要介紹的內容，主要是來學習JQuery中插件Xslider的滾動效果，不多說，具體內容的實現來看本文詳解。

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

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

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

效果圖：

功能介紹：

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

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

3、可實現4種滾動形式：

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

使用方法：

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

參數說明：

“.productshow”是要實現滾動效果的對象，該對象要包含一個被移動的對象和左右移動按鈕。如下面的html結構：

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

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

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

unitdisplayed：該參數是必需項。指定可視框內可見的最小單元個數；

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

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

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

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

loop：cycle，該參數是可選項。指定是否需要循環滾動，不需要則不要傳入該參數，注意如果html結構不是li列表的話不能實現循環滾動的效果；
speed：該參數是可選項。指定每次移動的速度，單位是毫秒；

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

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

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