返回介绍

pageSlider

发布于 2020-01-29 13:50:24 字数 2272 浏览 1024 评论 0 收藏 0

功能

长页面翻页。

author: leeenx
version: 1.0.0
data: 2016-01-19

Official Usage

$("#wrap").pageSlider(
  {
    direction:'Y',
    cover: 1,
    offset:50,
    duration:300,
    infinite:true,
    onchange:function(o,i){
      //通过this[0]可以取对应的分页哦
      //o滑出页索引,i滑入页索引
      console.log(o,i);
    }
  }
);

Lazy Usage

$("#wrap").pageSlider(
  {
    direction:'Y',
    cover: 0,//首屏索引
    offset:50,
    duration:300,
    infinite:true,
    onchange:function(o,i){
      //通过this[0]可以取对应的分页哦
      //o滑出页索引,i滑入页索引
      console.log(o,i);
    }
  }
);

需要注意,#wrap容器下的所有子节点都会被识别为它的子页。具体,看DEMO

参数列表

name 类型 必选 描述
direction string optional 翻页的方向,默认值为Y。可选值:X,Y
cover int optional 首屏的页面索引。默认为:0
offset int optional 翻页所需的手指位移最少偏移量。默认 50,单位px
duration int optional 翻页动画持续时长。默认 300,默认毫秒
infinite boolean optional 无限循环。默认 true
onchange function optional 翻页事件监听

方法列表

name 描述
lock 锁定页面。锁定后不能翻页
unlock 解锁页面,与lock相对应
move 将页面定位到指定的索引值。pageSlider.move(index);

DEMO

点击查看pageSlider

模块下载

http://wq.360buyimg.com/js/ho2/min/uncmd.js
http://wq.360buyimg.com/js/ho2/min/prefix.js
http://wq.360buyimg.com/js/ho2/min/pageSlider.js

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文