1、HTML代码结构(必须定义DIV的高与宽,图片不需要给高与宽):
- <div id="saySlide">
- <img src="图片1地址" href="图片1的链接地址" alt="图片1的标题" />
- <img src="图片2地址" href="图片1的链接地址" alt="图片2的标题" />
- <img src="图片3地址" href="图片1的链接地址" alt="图片3的标题" />
- </div>
2、调用方法:
- $("#saySlide").saySlide(options);//options为对象,值如:{autotime:5000,autodir:"jq.fadeOut",isTitle:true}
3、options(对象)参数:
参数名 | 数据类型 | 默认值 | 描述 |
---|---|---|---|
autoTime | number | 5000 | 自动播放的时间间隔,单位为毫秒 |
speed | number | 300 | 动画播放的速度,单位为毫秒 |
autodir | string | "RL" | 自动播放时切换的效果。可选参数值:"LR"从左到右,"RL"从右到左,"TB"从上到下,"BT"从下到上, jQuery自带的动画效果:"jq.fadeOut" , "jq.slideUp" , "jq.hide" |
isTitle | boolean | false | 是否显示标题。标题取自img标签的alt属性 |
isBlank | boolean | true | 是否在新窗口打开链接。如果img标签有href属性且不为空,则自动给图片加上链接,此时参数isBlank才会生效。如果不需要链接则不需要给img标签添加href属性(注:img标签的href属性用于存链接,a标签的href就是从这里得到的) |
isBottombg | boolean | false | 是否显示底部半透明背景,该设置只有在isTitle为false生效 |
btnAlign | string | "center" | 按钮在底部显示的位置,可选参数:"left" , "center" , "right" 。如果isTitle为true,则按钮只能显示在右边,此时btnAlign参数值不起作用 |
defaultBg | string | "#999999" | 按钮默认背景色 |
currentBg | string | "#ffffff" | 按钮激活状态背景色 |
titleStyle | string | 无默认值 | 此参数用于控制标题的样式(行内样式),也可以在CSS中控制标题样式,参数值如:"font-size:14px;color:red;" |
btnEvent | string | "click" | 触发按钮的事件。理论上支持jQuery自带的所有事件 |
callback | function | 空函数 | 回调函数 |
版本更新说明:由于本人最近正在学习JS对象,相对于之前的SaySlide 1.0版本,对代码进行了全部重写,改变了上下左右运动的效果,并增加了slideUp和hide两种效果,同时也去除了左右切换的按钮。