想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触摸操作也是移动设备的中一个特性,我们必须专业化的处理,哈哈。其实实现原理很简单,但平常中自己开发不是很方便。

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

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" class="swipe">
<div class="swipe-wrap">
<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>

Swipe JS – 移动WEB页面内容触摸滑动类库的更多相关文章

  1. js打印WEB页面内容代码大全

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="tex ...

  2. 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

    在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...

  3. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

  4. web页面内容优化管理与性能技巧

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

  5. (转)基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

    http://www.cnblogs.com/wuhuacong/p/5147368.html 在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这 ...

  6. web 页面内容优化管理与性能技巧

    回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我 ...

  7. 知名网站内部资料:WEB页面内容优化管理与性能技巧

    回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起, ...

  8. web页面内容打印总结

    web页面打印有两种,一种是直接调用window.print()命令操作,一种是使用ActiveX插件(Object标签)操作,但是第二种只支持IE内核的浏览器. 示例1: <!DOCTYPE ...

  9. JS禁止WEB页面鼠标事件大全

    <!--禁止鼠标右键代码-->:<noscript><ifra:<scriptlanguage=javas:<!--:if(window.Event):doc ...

随机推荐

  1. good luck

    ACM大法好,明天求轻虐,水一波~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  2. 如何解决phpcms后台验证码不显示的问题

    方法一: 主要在于是否开启gd库 查看办法 找到php.ini文件 搜索extension=php_gd2.dll这段代码(windows) 然后把前面的;符号去掉即可. centOS6.5中可能需要 ...

  3. Python类的特点 (2) :类属性与实例属性的关系

    测试代码: #encoding:utf-8 class Parent(object): x=1 #x是Parent类的属性(字段) ls=[1,2] #ls是一个列表,也是Parent类的属性(字段) ...

  4. 利用php的register_shutdown_function来记录php的输出日志

    最近在做的一个项目..由于全是通过远程http请求来调用php的接口程序.. 接收到的参数和返回的内容对开发人员来说都是未知不可见的.. 虽然可以通过直接在脚本中模拟请求..但由于实际环境复杂的多.. ...

  5. HTML——meta标签

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容.&l ...

  6. POJ 1917

    http://poj.org/problem?id=1917 poj的字符串的一道水题. 题意么无关紧要, 反正输出的第一行就是把那个<>去掉,s1<s2>s3<s4&g ...

  7. C# 读写十六进制bin 文件

    读一个十六进制的bin文件,在bin文件添加四行头,生成新的bin文件.bin文件可以用vs打开查看. using System; using System.Collections.Generic; ...

  8. 全能直播王PC版-0707-full_codecs

    全能直播王是一款高清流畅的全平台的电视直播应用,让您随时随地看高清电视直播. [全能特色] 1. 收录全国1400多个直播频道,包括湖南卫视.江苏卫视.浙江卫视等热门频道. 2. 频道多线路自动选择, ...

  9. mybatis 获取自增ID

    在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名,而不是表格的字段名. <inser ...

  10. python数据库(mysql)操作

    http://fantefei.blog.51cto.com/2229719/1282443