原先是因某个设计似乎用我所知的插件修改使用都比较麻烦,所以一时兴起开始自己动手写程序。那个时候它只是一段程序,后来有空才把它改装成了插件。成为插件之后,它变得更为灵活、更为合理。废话不多说,我在CSDN资源上传了源代码并附带了一个非常简单的DEMO,作为学习交流之用。 进入下载页>>>
我将该插件名定为imgSlideInput,初发布版本为0.0.2(将原先的程序作为初版)。
插件功能:
- 图片水平左右滑动
- 有前一张、后一张、第一张、最后一张的跳转按钮
- 有没一张图片的跳转按钮,可以显示为数字
- 图片滑动同时可以获取现在显示图片所代表的值放入Form元素中
参数说明:
-
speed
-
图片滑动速度,值的设置参考jQuery Animate动画的speed属性。默认值"fast"。
-
loop
-
布尔值,图片滑动是否可循环的开关。关闭循环则在滑动到第一张图片的时候再点前一张按钮不会继续滑动到最后一张图片,向后滑动到最后一张图片的时候也同样。默认值true。
-
showPrevNext
-
布尔值,是否显示前一张和后一张按钮。默认值true。
-
showTerminalBtns
-
布尔值,是否显示第一张和最后一张按钮。默认值true。
-
showStepBtns
-
布尔值,是否显示可直接跳转到每一张图片的按钮。默认值true。
通过stepNumeric属性可使按钮显示为数字。
-
stepNumeric
-
布尔值,是否在跳转到每一张图片的按钮上显示数字。默认值false。
-
prevbtn
-
“前一张”按钮的选择器。默认值".prevbtn"。
-
nextbtn
-
“后一张”按钮的选择器。默认值".nextbtn"。
-
topbtn
-
“第一张”按钮的选择器。默认值".topbtn"。
-
endbtn
-
“最后一张”按钮的选择器。默认值".endbtn"。
-
stepbtn
-
每张图片跳转按钮所在容器的选择器。默认值".stepbtn"。
若设置showStepBtns属性为true,则会自动在该容器内插入连接到对应图片的按钮,按钮的html结构由stepbtnHtml设置。通过stepNumeric属性可使按钮显示为数字。
-
stepbtnHtml
-
若设置showStepBtns属性为true,则会自动在stepbtn属性设置的容器内插入使用此html结构并连接到对应图片的按钮。通过stepNumeric属性可使按钮显示为数字。
-
stepbtnItem
-
选择器,指示stepbtn按钮。默认值"A"。
-
getValue
-
布尔值,是否获取当前显示图片值得开关。默认值true。
-
itemValue
-
选择器,指向存放每张图片值的元素。默认值".value"。
该值是通过.text()方法获取的,即图片的值需放在一个单独的元素内。
-
valueField
-
选择器,用于获取当前显示图片的值。默认值"INPUT"。
-
currentClass
-
字符串,当前显示图片所在元素上所加的class名。注意,不是选择器,而是class名称。默认值"show"。
-
currentStepClass
-
字符串,当前显示图片所对应的跳转按钮上的class名,用于设置该按钮的特殊样式。注意,不是选择器,而是class名称。默认值"highlight"。
-
btnDisableClass
-
字符串,指示prevbtn、nextbtn、topbtn及endbtn的状态,用于设置该按钮的特殊样式。注意,不是选择器,而是class名称。默认值"disable"。
当loop属性为true时:当前显示图片为第一张,则topbtn添加该class;当前显示图片为最后一张,则endbtn添加该class。
当loop属性为false时:当前显示图片为第一张,则topbtn/prevbtn添加该class;当前显示图片为最后一张,则endbtn/nextbtn添加该class。