最新文章
本栏相关
其他文章
☑下载/引用地址: ☞ http://www.xcsoft.cn/Public/js/jquery.imgscroll.min.js☜
☑基本调用方法,其他可参考演示
// JavaScript Document
/**
* 当你的页面已经加载jquery时,如下写法
*/
$(function(){
imgScroll.scroll({
name:'imgscroll2',
width:'380px',
direction:"left",
height:'180px',
addcss:true,
showinfo:"scroll",
infodirection:'top',
speed:200
},5000,1000)
})
/**
* 当你的页面还没有加载jquery时,本函数自动加载jquery,默认调用百度CDN公共库的jquery
* xcsoft.jquery(function(){...},param)
* @param function(){...} 函数,即jquery加载后执行,如同$(function(){...})
* @param param string 版定本[见下方取值]或者自义jquery相对路径或者绝对路径,默认调用百度CDN公共库的jquery中的1.6.4版本
* version 取值规定:2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
* xcsoft.jquery(function(){},'1.6.4')//调用百度CDN公共库中的jquery版本
* xcsoft.jquery(function(){},'http://www.xcsoft.cn/Public/js/jquery.js')//调用自定义jquery
*/
xcsoft.jquery(function(e){
//滚动循环示例
imgScroll.scroll({
name:'imgscroll2',
width:'380px',
direction:"left",
height:'180px',
addcss:true,
showinfo:"scroll",
infodirection:'top',
speed:200
},5000,1000)
});✍ 焦点渐变循环切换:imgScroll.gradual({参数:值,参数:值,...},图片停留时间,动画切换速度) ☞ 查看演示
| 参数 | 值 | 有效性 | 描述 |
| name | 自定义 | 必填 | 图片切换容器的class样式名,如:imgscroll |
| event | click|hover | 选填 | 焦点控制的鼠标事件,默认:hover |
| addcss | true|false | 选填 | 自动添加必要CSS样式,默认:true |
| autoplay | true|false | 选填 | 自动滚动,默认:true |
| width | 自定义 | 选填:addcss为true时生效 | 循环的元素宽度,如:380px,默认:取第一个li的宽度 |
| height | 自定义 | 选填:addcss为true时生效 | 循环的元素高度,如:180px,默认:取第一个li的高度 |
| prev | 自定义 | 选填 | 控制上一张显示的class样式名,默认:pre |
| next | 自定义 | 选填 | 控制下一张显示的class样式名,默认:next |
| showinfo | gradual|scroll|normal | 选填 | 图片说明的显示方式,gradual(渐变/默认)、scroll(滚动) |
| infodirection | bottom|left|right|top | 选填:showinfo为scroll时生效 | 图片说明的滚动方向,默认:bottom |
| speed | 自定义 | 选填:showinfo不为normal时生效 | 图片说明的滚动速度,默认:100(0.1s) |
✍ 焦点滚动循环切换:imgScroll.scroll({参数:值,参数:值,...},图片停留时间,动画切换速度) ☞ 查看演示
| 参数 | 值 | 有效性 | 描述 |
| name | 自定义 | 必填 | 图片切换容器的class样式名,如:imgscroll |
| direction | left|right|top|bottom | 选填 | 定义滚动方向,默认:left |
| event | click|hover | 选填 | 焦点控制的鼠标事件,默认:hover |
| addcss | true|false | 选填 | 自动添加必要CSS样式,默认:true |
| autoplay | true|false | 选填 | 自动滚动,默认:true |
| width | 自定义 | 选填:addcss为true时生效 | 循环的元素宽度,如:380px,默认:取第一个li的宽度 |
| height | 自定义 | 选填:addcss为true时生效 | 循环的元素高度,如:180px,默认:取第一个li的高度 |
| prev | 自定义 | 选填 | 控制上一张显示的class样式名,默认:pre |
| next | 自定义 | 选填 | 控制下一张显示的class样式名,默认:next |
| showinfo | gradual|scroll|normal | 选填 | 图片说明的显示方式,gradual(渐变/默认)、scroll(滚动) |
| infodirection | bottom|left|right|top | 选填:showinfo为scroll时生效 | 图片说明的滚动方向,默认:bottom |
| speed | 自定义 | 选填:showinfo不为normal时生效 | 图片说明的滚动速度,默认:100(0.1s) |
✍ 连续无缝循环滚动:imgScroll.rolling({参数:值,参数:值,...}) ☞ 查看演示
| 参数 | 值 | 有效性 | 描述 |
| name | 自定义 | 必填 | 图片滚动容器的class样式名,如:imgscroll |
| direction | left|right|top|bottom | 选填 | 定义滚动方向,默认:left |
| addcss | true|false | 选填 | 自动添加必要CSS样式,默认:true |
| width | 自定义 | 选填:addcss为true时生效 | 循环的元素宽度,如:380px |
| height | 自定义 | 选填:addcss为true时生效 | 循环的元素高度,如:180px |
| speed | 自定义 | 选填 | 滚动速度,默认:40(数值越小,滚动越快) |
注1:当addcss为false时,将不添加必要的CSS样式,请在CSS里自行添加.
注2:如需渐变/滚动实时切换看效果时,请将addcss改为true.
注3:[必须]使用前需引用JQuery,或者使用xcsoft.jquery自动加载JQuery.
按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)
| 您的姓名: | |
| 上一步:鼠标向上滚动/左方向键(←) 下一步或完成:鼠标向下滚动/Tab键/右方向键(→) |
| 您的电话: | |
| 您的邮箱: |
| 信息内容: | |
| 验证码: |