jQuery实现经典的网页3D轮播图封装功能【附源码下(2)

脚本的调用方法,调用一个init函数初始化,定义的参数意义是:自定父节点ul总宽度(number),自定ul和图片的初始化最大高度(中间那图)(number),图片的初始化最大宽度(中间那图)(number),图片最小透明度(0~1),图片最小缩放系数(0~1),默认轮播方向("left","right"),动画速度ms(number),轮播图片延时停留时间ms(number)(注:这个参数必须大于动画速度),鼠标经过是否停止(false,true)。

$(function(){ init(1300,600,600,0.7,0.5,"right",500,3000,false); });

为了运行效果更为显眼,给ul加个边框居中吧。

#pic_play{ position: relative; border: 1px solid black; margin: 30px auto; }

看以下运行效果:这里其实每张图的大小都不一样啊,都可以自适应轮播了

jQuery实现经典的网页3D轮播图封装功能【附源码下

大家会发现没有左右切换的按钮?没关系,我们可以调用btn()函数。btn里面的参数意义分别是:左右按钮分别距离ul左右边距(number),左右按钮距离ul上边距(number),默认轮播方向("left","right")一般和init里的一样如果你不想点击后改变运动方向,动画速度ms(number)一般和init里的一样如果你不想点击后改变动画速度,每张图片延时停留时间ms(number)(注:这个参数必须大于动画速度)一般和init里的一样如果你不想点击后改轮播停留时间。

$(function(){ init(1000,460,460,0.7,0.5,"right",500,3000,false); btn(40,230,"right",500,3000); });

下面来看效果:

jQuery实现经典的网页3D轮播图封装功能【附源码下

如果想用自己的按钮款式,可以直接在我的btn封装函数里面换啊。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/2464c7833a1a9b4dbfef9971ea026b26.html