一. 基础使用设置
注意：在网页的头部引用jQuery和abTouch两个必需的js既将jquery和abTouch包含在head标中或位于关闭正文标记之前。请确保在abTouch之前包含jquery前后顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-abTouch演示例子</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="js/jquery.abTouch.min.js"></script> <!-- 必须存在2 -->
8. </head>
9. <body>
二. 编写html代码
注意：创建一个div的父层，如此例子abTouch-body。在其内部为每一个幻灯片创建一个目标元素.abTouch-box，使用css控制其样式。jQuery和abTouch将选定父层元素内的层标签与样式应用于它们。
1. <div class="abTouch-body"> <!-- 此为父层，添加调用时需要用到此处的class名 -->
2. </div>
三. 编写例子css样式
注意：编写 html 和 css 样式时一定要注意，父层元素和容器层元素，都必须具有指定的宽度和高度，abTouch-v1.1.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#fff; font-size:12px; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#333; text-decoration:none; }
8. a:hover { color:#1974A1; text-decoration:none; }
9. /* abTouch-body为父层，添加调用时需要用到此处的class名 */
10. </style>
四. 调用参数的设置
注意：在要使用效果的div父层abTouch-body外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，方便维护与管理。调用代码必须放在引用jquery和abTouch之后的位置才能正常使用
1. <script type="text/javascript">
2. $("#abTouch-demo").abTouch({
3. });
4. </script>
5. </body>
6. </html>
参数文档
abTouch体积小使用简单，有效的解决手机、平板电脑等移动设备触摸屏上的网页特效展示，熟练掌握后只需要简单的变换一定参数即可调用使用。适合移动终端上绝大多数的主流浏览器。
参数 版本 默认值 说明
scrollEl 1.0 null 滚动元素层
mainEl 1.0 null 内容元素层
mainCur 1.0 false 指定 mainEl 或 scrollEl 是否为当前元素（除“menu”类型外），如：“手风琴”切换类型，需设为true false 时，调用方式为 mainEl || scrollEl: mainEl: ul，则自动获取下一层，作为列表 true 时，调用方式为 mainEl || scrollEl: mainEl: ul li，则为当前，作为列表
type 1.0 left 效果类型，可选 "slide" || "menu" || "roll" ，slide为幻灯效果，menu为菜单效果，roll为左右滑动
direction
1.0
left
scrollEl滚动方向，可选 "top" || "bottom" || "left" ，分别为：上、下、左
注意：当你设置为“左或右”无缝滚动的时候，必须给你的ul添加样式float:left
loop 1.0 false 是否循环，布尔值类型 true || false
pnLoop 1.0 true 是否按钮循环，布尔值类型 true || false，如果为false时，执行到第一个或最后一个将不再返回
autoPlay 1.0 false 是否自动播放，布尔值类型 true || false 注意: 如果该参数值为true时，则需要同时将pnLoop参数值设为true，才能自动循环播放
curOff 1.0 false 当effect效果为"fade" || "slideDown"，点击当前显示元素是否关闭
sStep 1.0 1 当sEffect为“marquee”时,滚动步长
index 1.0.2 0 默认情况下指定显示n的一个，从0的开始，如果需指定执行第一个则为0，第二个则为1....
delayTime 1.0.2 3500 每执行间隔时间，单位为毫秒
speed 1.0.2 350 （mainEl）内容效果速度，单位为毫秒，参数越小效果速度越快，为0时则无任何效果
sSpeed 1.0.2 350 （scrollEl）滚动效果速度，单位为毫秒，参数越小效果速度越快，为0时则无任何效果
triggerTime 1.0.2 50 毫秒，触发事件延时时间，以防重复执行效果。若为0则立刻执行效果
effect 1.0.2 fade mainEl效果类型，可选: fade、fold、slideDown、top、bottom、left
sEffect 1.0.2 null scrollEl滚动效果类型 “marquee”为无缝隙滚动（注意: autoPlay:true生效）
easing 1.0.2 swing 缓动效果，查看所有
sPrev 1.0.2 null 滚动上一组按钮元素
sNext 1.0.2 null 滚动下一组按钮元素
sPrevOffClass 1.0.2 off 上翻按钮屏蔽后的class名，当滚动为第一组时有效
sNextOffClass 1.0.2 off 下翻按钮屏蔽后的class名，当滚动为最一组时有效
onClass 1.0.2 on 当选择执行元素时的class名
offClass 1.0.2 null 为被选中执行元素时的class名
mPrev 1.0.2 .mPrev （mainEl）内容上一个按钮元素
mNext 1.0.2 .mNext （mainEl）内容下一个按钮元素
mPrevOffClass 1.0.2 off 上一个按钮屏蔽后的class名，当内容执行为第一个时有效
mNextOffClass 1.0.2 off 下一个按钮屏蔽后的class名，当内容执行为最后一个时有效
play 1.0 null 播放按钮，当autoPlay:false时，则点击该按钮为自动播放
pause 1.0 null 暂停按钮，当autoPlay:true时，则点击该按钮为停止播放
mainState 1.0.2 null 内容导航包裹层元素（如果为空时则自动填充导航），如内容数量的编号导航
mainStateHtml 1.0.2 li 内容导航包裹层子元素HTML标签名
pageState 1.0.2 null 页码导航包裹层元素（如果为空时则自动填充导航）
pageStateHtml 1.0.2 li 页码导航包裹层子元素HTML标签名
mainCountState 1.0.2 null 内容统计包裹层元素，如: 1/22 形式
pageCountState 1.0.2 null 页码统计包裹层元素
autoPage 1.0.2 false 是否自动为包裹元素填充“pageState”（分页页码），布尔值类型 true || false 如果为false时，则将该元素当作为包裹元素的子元素
autoMainState 1.0.2 false 是否自动为包裹元素填充“mainState”（内容列表编号），布尔值类型 true || false 如果为false时，则将该元素当作为包裹元素的子元素
defaultShow 1.0.2 true 默认是否显示指定元素，布尔值类型 true || false
returnDefault 1.0.2 false 是否返回默认执行状态，布尔值类型 true || false，如果为true时，则执行默认index属性值
autoPosition 1.0.2 false 是否自动定位显示元素的位置，当type为"menu"时，布尔值类型 true || false
addX 1.0.2 0 显示元素的水平方向位置偏移值，当type为"menu"可用
addY 1.0.2 0 显示元素的垂直方向位置偏移值，当type为"menu"可用
iTrigger 1.0.2 null type: "menu"生效,激活菜单子元素,响应事件时可关闭
iTriggerFunc 1.0.2 null type: "menu"生效,激活菜单子元素响应事件回调函数 返回可用参数: o（当前响应对象）
startFunc 1.0.2 null 执行效果起始时，需要执行的自定义扩展函数。 返回可用参数有: index（索引编号），如:幻灯播放时的第n的一个、total（总个数）、page（当前页码）、pageTotal（总页码数）、mainState（属性mainState元素）、pageState（属性pageState元素）、scrollEl（属性scrollEl元素）、mainEl（属性mainEl元素）、isPlay（当前是否为播放状态）
completeFunc 1.0.2 null 执行效果完毕时，需要执行的自定义扩展函数。 返回可用参数: 与startFunc一致
endFunc 1.0.2 null 执行效果结束后时，需要执行的自定义扩展函数。（如:menu类型，动画结束后执行该参数） 返回可用参数如: 与startFunc一致
playFunc 1.0.2 null 播放动画效果时，需要执行的自定义扩展函数。 返回可用参数如: 与startFunc一致
pauseFunc 1.0.2 null 暂停动画时，需要执行的自定义扩展函数。 返回可用参数如: 与startFunc一致
abTouch基于jquery运行的开源触屏版特效插件
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200 (二)790370978可反馈问题