大陆仔 iPush 轮播程序源码 v1.0 |
| 2021-01-21 20:16:00 35资源网(www.35d.net) |
| java |
下载本资源原文网址：http://www.daima.org/java/java9711.html 大陆仔 iPush 轮播程序 （支持响应式设计）
Ipush 是有大陆仔仔开发的一套基于jQuery 的JS轮播程序，他完全符合当前流行的响应式设计，可跨平台使用。同时，在移动端还可以支持单指触发事件切换播放顺序。
该插件功能强大，可以支持三种播放形式调用：
1、极简播放形式：没有播放操作按钮，由系统自动轮播；
2、迷你播放模式：即支持用户操作播放上一张图片和下一张图片；
3、高级播放模式：即支持用户任意切换轮播图片。
三种模式，系统均有内置模式，同时也支持用户自定义模式。
极简播放形式
$.dlz_iPush(obj);
dlz_iPush 是系统的构造函数，使用iPush程序时候必须调用！
默认方式
$.dlz_iPush ();
dlz_iPush 有一个参数，该参数是一个对象。
对象参数分别是
ipush_obj: 将要轮播的容器 （系统默认为id=ipush_case）
main_obj: 轮播图片的容器 （系统默认为 class=ipush_main_case）
main_group:轮播图片容器内部的标签 (系统默认为 dd)
intervalTime:播放的间隔毫秒数 (系统默认为 4000)
animateTime:系统播放动画的速度 (系统默认为 1000)
系统构造的理想HTML是这样的架构
JS应该这样调用
$.dlz_iPush({ipush_obj:'ipush_case',main_obj:'.ipush_main',main_group:'dd'});
再说下相对应CSS处理：理论上将是不需要用户干涉了。系统会自动为HTML加上必须的样式。而为了更好的显示出来HTML，还是建议用户给 dd 加上 float:left； 属性比较好。
否则，刚打开网页看到的图片全是散开的，只有JS加载好了才能收回去。看上去用户体验很不好。
迷你内部播放控件
$.dlz_iPush_mini_config(obj);
dlz_iPush_mini_config是调用迷你控件的接口。该对象内置了一个方式显示，使用内置模式的方法是
$.dlz_iPush_mini_config(true);
当然，也可以自定义迷你控件的样式：
dlz_iPush_mini_config 的参数如果是一个对象，系统就会认为是自定义参数了，对象参数具体如下：
display_mini_config_up: 向上播放的接口 (系统默认是.ipush_mini_config_up_)
display_mini_config_next:向下播放的接口 (系统默认是.ipush_mini_config_next_)
//为了保证不和其他程序冲突，系统会在以上两个类_之后自动生成一个6位的随机数字来区分。
系统构造的理想HTML是这样的架构
class="ipush_mini_config_up" href="javascript:void(0);"><
>
JS 应该这样调用
$.dlz_iPush_mini_config{display_mini_config_up:'ipush_mini_config_up',display_mini_config_next:'ipush_mini_config_next'});
系统就是通过参数来识别是用户采用内置方式显示还是自定义方式显示的。
高级播放模式
$.dlz_iPush_config(obj);
dlz_iPush_config 是系统的高级模式对应接口。该对象内置了一个方式显示，使用内置模式的方法是
$.dlz_iPush_config(true);
当然，也可以自定义高级播放模式控件的样式：
iPush_mini_config 的参数如果是一个对象，系统就会认为是自定义参数了，对象参数具体如下：
display_config: 用户操作播放的容器 (系统默认为 ipush_config_case_)
display_group: 用户操作播放的标签组 (系统默认为 dd)
display_current:当前播放状态的样式 (系统默认为 ipush_config_case_’current’)
//为了保证不和其他程序冲突，系统会在以上两个类_之后自动生成一个6位的随机数字来区分。
系统构造的理想HTML是这样的架构
jS 应该这样调用
$.dlz_iPush_config({display_config:'ipush_config_case',display_group:'dd',display_current:'ipush_config_case_current'});
系统就是通过参数来识别是用户采用内置方式显示还是自定义方式显示的。
移动&平板设备手势操作接口
dlz_iPush_config 是系统的高级模式对应接口。该对象内置了一个方式显示，使用内置模式的方法是
$.dlz_iPush_touch();
该对象一旦调用，程序就会执行。现在移动和平板上就可以支持单指翻页了！
程序参考:
//mojing.org/daluzai/ipush.shtml?ping=help
程序帮助接口
$.dlz_iPush_help();
调用该接口即获取程序手册查看。
一下是全部变量供参考使用
//ipush 容器对象
var _ipush_case;
//显示图片容器对象
var _img_case;
//显示对象宽度
var _width=0;
//显示对象高度
var _height=0;
//播放图片的集合
var _playArr;
//当前播放进度
var _playCurrent=1;
//interval key
var _interval_key;
//配置参数
var _matchOption={};
//随机一个key作为表示
var _randomKey=Math.round(Math.random()*999999);
//-api 显示播放组建(需要手动添加，因此默认为false)
var _iPush_config={
iPush_config:false,
ipush_config_case:'ipush_config_case_'+_randomKey,
ipush_display_group:'dd',
ipush_display_current:'ipush_config_case_'+_randomKey+'_current'
}
//-api 显示迷你播放组建(需要手动添加，因为默认为false)
var _iPush_mini_config={
iPush_mini_config:false,
ipush_mini_config_up:'ipush_mini_config_up_'+_randomKey,
ipush_mini_config_next:'ipush_mini_config_next_'+_randomKey
}
//-api 移动&平板设备手势操作对象
var _ipush_toch_obj={}; |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
