QQ 1640076782

2014年06月28日

Jquery jcarousellite.js 图片自动滚动效果

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 4:40 上午

对于常做外贸购物网站的人来说,jcarousellite.js对我们来说并不陌生,因为在产品详细页我们会经常用到这个js来展示产品的细节图。通常情况下,如果产品的细节图过多,我们会通过鼠标左右点击来展示更多的图片,那如果要想所有的细节图都自动滚动该如何来实现呢?其实只要我们理解了jcarousellite.js的各项参数的实际含义,实现起来就相对容易了!首先我们来看看它的各项参数的作用。

参数说明:

btnPrev string 上一个按钮的class名, 比如 btnPrev: “.prev”

btnNext string 下一个按钮的class名, 比如 btnPrev: “.prev”

btnGo array 自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮:[".1", ".2"]

mouseWheel bool 鼠标滑是否可以轮控制上下滚动,可选:false,true,默认false

auto int 指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000

speed int 滑动的速度,可以尝试800 1000 1500,设置成0将删除效果

easing string 缓冲效果名称,如:easing: “bounceout”,需要jquery中的easing pluin(缓冲插件实现),只适用于jq1.2

vertical bool 是否垂直滚动,可选:false,true,默认false

circular bool 是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动

visible int 可见数量,可以为小数,如2.5为2.5个li

start int 开始的地方,默认是0

scroll int 每次滚动的li数量

beforeStart func 滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert(“开始的对象是:” + a)}

afterEnd func 滚动结束时回调的函数,使用方法同上

理解了各项参数的意义,修改起来就会容易很多,要想实现小图的自动滚动,我们只需要circular的属性值设为true,此外还得给auto属情设定一个值,只要是大于0的都可以,实际数值可以根据网站的实际需要来设定。其他的一些参数也可以尝试修改实现不同的效果。