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支持水平滚动和垂直滚动的内容介绍完了，希望通过本文的学习能对你有所帮助！
