Swipe JS – 移动WEB页面内容触摸滑动类库

时间: 2013-12-5 分类: 前端技术 作者: SAI

TAGS:

做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触摸操作也是移动设备的中一个特性.

今天在网上看到一个轻量级js触摸滑动类库 – Swipe JS。这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。

0309283625b2916b5c49db6

Swipe函数介绍

下面就为大家介绍下Swipe JS的使用方法,Swipe有以下几个参数:

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间,单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数,切换时触发
transitionEnd: function(index, element) {}  //回调函数,切换结束调用该函数。

除此之外,还有一些比较使用的API方法,例如:
prev():上一页
next():下一页
getPos():获取当前页的索引
getNumSlides():获取所有项的个数
slide(index, duration):滑动方法
Swipe使用方法

了解基本函数方法后,我们就来看看使用方法。

首先是HTML结构:

<div id="slider">
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

然后是样式代码:

.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > figure {
	float: left;
	width: 100%;
	position: relative;
}

最后设置JS绑定以及参数设置:

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

在这里只要把上面介绍的函数参数写在里面,就可以实现相对应的功能。

最后我们也可以给滑动切换添加上下按钮:

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

到这里我已经在电脑、笔记本、平板、手机上试过效果了,如上图所示。

源码下载

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Swipe JS – 移动WEB页面内容触摸滑动类库
本文地址:http://www.saiody.com/?p=639

返回顶部