最近项目需要用到滚动效果,发现这款插件很不错,支持功能比较强大,完全能满足滚动需求,不管是图片滚动还是文字滚动
写滚动效果的html结构可能大都是用li列表,滚动时一般是通过li的个数来指定移动距离,Xslider打破这种思维局限,任何一个对象在这里都能实现滚动效果,而不仅是li列表!为什么?插件的思想是把移动对象网格化看待,通过判断可视框宽度、要移动对象的宽度及它当前的位置(获取left或top值)来控制滚动,所以你只需指定可视框宽度、要移动对象的宽度以及每次要移动的单位网格数,不管你的html结构是li的列表还是纯文本字段,都能实现滚动的效果。
参数说明
$(".productshow").xslider({//.productshow是要移动对象的外框; unitdisplayed:3,//可视的单位个数 必需项; movelength:1,//要移动的单位个数 必需项; maxlength:null,//可视宽度或高度 默认查找要移动对象外层的宽或高度; scrollobj:null,//要移动的对象 默认查找productshow下的ul; unitlen:null,//移动的单位宽或高度 默认查找li的尺寸; nowlength:null,//移动最长宽或高(要移动对象的宽度或高度) 默认由li个数乘以unitlen所得的积; dir:"H",//水平移动还是垂直移动,默认H为水平移动,传入V或其他字符则表示垂直移动; autoscroll:1000//自动移动间隔时间 默认null不自动移动; });