双端的轮播图片,支持窗口自适应,左右拖动,
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、网站不提供资料下载,如需下载请到原作者页面进行下载。