双端的轮播图片,支持窗口自适应,左右拖动,

jqz-banner

基于jquery,zeptojs开发的支持手机端,pc端双端的轮播图片,支持窗口自适应,左右拖动,无限轮播,可扩展性

核心css: .banner{ overflow:hidden;position:relative;} .banner ul{ white-space: nowrap;font-size:0} .banner ul li{width: 100%;display:inline-block;font-size:1.4rem} 基础结构 <div class ='banner'> <ul> <li><img /><li> </ul> </div> 初始化 <script> var banner = new $.jqz_banner(); </script> 参数: obj:指定一个对象将作为轮播图;默认‘.banner’。 cell:输入图片目标className,默认'cell' time:间隔时间,默认3s;当为false时不轮播 duration:滑动速度,默认200ms distence://当达到多少距离时触发,默认图片的一半宽 loop:为true时循环播放,默认为true fun:返回一个当前目标的index,不受loop影响 nav:给一个对象添加为轮播图导航,会在目标对象下生成图片集的标签,并添加class='active'标记当前的位置,默认是没有样式的,方便用css自定样式。 事件:

<li> this.goto(index)传入一个index,默认0为第一张 <li>this.swipe(val)val为‘right时右滑动,其他为左 <li>this.stop()停止播放 <li>this.start(val)开始播放可以传人一个时间(s)

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。