1.touch 事件
(1)touchstart 手指放到屏幕触发
(2)touchmove 滑动触发
(3)touchend 离开触发
(4)touchcancel 系统取消 touch 事件的时候触发, 比较少用
一般时封装使用来实现这三种操作, 可以使用封装成熟的 JS 库
2.zeptojs
是一个轻量级的针对现代高级浏览器的 JavaScript 库, 它与 jQuery 有着类似的 API. 会用 jQuery 就会 zeptojs. 一些可选功能时专门针对移动端浏览器的; 它的最初目标是在移动端提供一个精简的类似 jQuery 的 JS 库
官网: http://zeptojs.com/
中文 API: http://www.CSS88.com/doc/zeptojs_api/
默认版本包括 core,Ajax,event,form,IE 模块
自定义构建: http://github.e-sites.nl/zeptobuilder/
注意: 了解即可
3.swiper
是一款成熟稳定的应用于 PC 端和移动端的滑动效果插件, 一般用来触屏焦点图, 触屏整屏滚动等效果. swiper 版本 2.x 支持低版本浏览器, 3.x 放弃支持低版本, 适用应用在移动端
中文网: http://www.swiper.com.cn/
4.swiper 参数设置
(1)initialSlide: 初始索引值, 从 0 开始
(2)direction: 滑动方向 horizontal | vertical
(3)speed: 滑动速度, 单位 ms
(4)autoplay: 设置自动播放及播放时间
(5)autoplayDisableOnlnteraction: 用户操作 swiper 后是否还自动播放, 默认是 true, 不再自动播放
(6)paginnation: 分页圆点
(7)paginationClickable: 分页圆点是否点击
(8)prevButton: 上一页箭头
(9)nextButton: 下一页箭头
(10)loop: 是否首尾衔接
- $(function(){
- var swiper = new Swiper('.swiper-container', { / 创建一个 swiper, 父级 div 类, 分页类, 按钮类 /
- pagination: '.swiper-pagination',
- prevButton: '.swiper-button-prev',
- nextButton: '.swiper-button-next',
- // 初始的幻灯片是第几张
- initialSlide :0,
- // 小圆点是否可点击
- paginationClickable: false,
- // 是否连续播放 (设置 false 会在最后一张返回)
- loop: true,
- // 设置多长时间间隔播放一张
- autoplay:3000,
- // 用户操作后还是否自动播放
- autoplayDisableOnInteraction:true
- })
- });
来源: http://www.bubuko.com/infodetail-2921147.html