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

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

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

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

效果圖：

功能介紹：

1、可以一次給頁(yè)面上綁定同一個(gè)類的所有對(duì)象實(shí)現(xiàn)滾動(dòng)效果；

2、支持水平和垂直方向的滾動(dòng)；

3、可實(shí)現(xiàn)4種滾動(dòng)形式：

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

使用方法：

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

參數(shù)說(shuō)明：

“.productshow”是要實(shí)現(xiàn)滾動(dòng)效果的對(duì)象，該對(duì)象要包含一個(gè)被移動(dòng)的對(duì)象和左右移動(dòng)按鈕。如下面的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”是被移動(dòng)的對(duì)象，他的position屬性需設(shè)置為absolute或relative，因?yàn)槟_本是通過(guò)改變它的left或top值來(lái)實(shí)現(xiàn)滾動(dòng)效果的。左右移動(dòng)按鈕的class名稱，左按鈕需指定為“.aleft”，右按鈕為“.aright”。在按鈕不可用狀態(tài)下，他的class名稱分別是“.agrayleft”和“.agrayright”。他們html結(jié)構(gòu)的位置不是固定的，只要在“.productshow”下能找到這些對(duì)象就行。

另外，給“.productshow”綁定腳本后，頁(yè)面上所有的“.productshow”對(duì)象都能實(shí)現(xiàn)滾動(dòng)效果；

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

numtoMove：該參數(shù)是必需項(xiàng)。指定每次移動(dòng)最小單元的個(gè)數(shù)；

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

scrollobjSize：該參數(shù)是可選項(xiàng)。移動(dòng)最長(zhǎng)寬或高（就是要移動(dòng)對(duì)象“.scrollobj”***能設(shè)置的left或top值），不傳入則由“.productshow”下li個(gè)數(shù)乘以u(píng)nitlen計(jì)算。demo頁(yè)面的范例一效果就是通過(guò)指定該值來(lái)實(shí)現(xiàn)；

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

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

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

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

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