Xslider:支持水平滚动和垂直滚动的多种效果

功能介绍:
1、可以一次给页面上绑定同一个类的所有对象实现滚动效果;
2、支持水平和垂直方向的滚动;
3、可实现4种滚动形式:

  • 滚动到对象底部就结束滚动而不是依然移动指定距离
  • 每次滚动固定距离,滚动到最后时不识别对象的底部,而是依然移动固定距离
  • 循环滚动
  • 自动滚动

参数说明:
○ “.productshow”是要实现滚动效果的对象,该对象要包含一个被移动的对象和左右移动按钮。如下面的html结构:

1
2
3
4
5
6
7
<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 :该参数是可选项。指定自动滚动的间隔时间,单位是毫秒,不传入则不会自动滚动。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值