移动端滑动插件Swipe教程


Posted in Javascript onOctober 16, 2016

前言

最近需要开发一个新的“微信活动平台”,手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了,遂又重新找了一个下有没有什么好的幻灯片插件,毕竟重复造轮子没有必要啊。

综合比较后发现,Swipe 这款插件还是比较不错的,所以这里特地写一篇文章以像大家推荐,并且作为记录,方便下次查看。

简介

Swipe 是一个轻量级的移动滑动组件,这点从文件大小不难看出。它支持 1:1 的触摸移动,阻力以及防滑。单纯从移动端来使用,应该满足基本的需求了。

说明

从github下载后,可以发现,总共就8个文件,其中可能真正项目中用得到的,也基本就是1个 swipe.js 文件。
index.html 和 style.css 本身是作为演示存在的,有兴趣的可以研究一下。

那么我们具体如果使用它呢?很简单,基本只要如下代码即可:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>演示</title>
  <!-- 首先引入JQuery -->
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- 引入核心swipe.js文件 -->
  <script src="swipe.js"></script>
  <!-- 幻灯片基础样式 -->
  <style>
    .swipe {
     overflow: hidden;
     visibility: hidden;
     position: relative;
    }
    .swipe-wrap {
     overflow: hidden;
     position: relative;
    }
    .swipe-wrap > div {
     float:left;
     width:100%;
     position: relative;
     font-size:140px; /* 这里样式是为了演示方便,我特意加的 */
    }
  </style>
</head>
<body>
  <!-- 幻灯片实例代买,前两层是外围容器 -->
  <div id='slider' class='swipe'>
   <div class='swipe-wrap'>
    <!-- 这三个是幻灯片内容,其中1,2,3等数字可换成图片,样式根据需求更改即可 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
   </div>
  </div>
  <!-- 页面幻灯片运行脚本(初始化) -->
  <script>
    window.mySwipe = Swipe(document.getElementById('slider'));
  </script>
</body>
</html>

以上代码运行结果:

 

通过鼠标点击或者放到手机上手指滑动,就可以看见幻灯片的运行效果了。当然,当前只是最基本的,全部都是默认配置。我们完全可以通过下面提供的参数,结合自己的需求,自义定出更好的效果来。

startSlide Integer (default:0) - index position Swipe should start at(滑动的索引值,即从*值开始滑动,默认值为0)

speed Integer (default:300) - speed of prev and next transitions in milliseconds.(滑动的速度,默认值300毫秒)

auto Integer - begin with auto slideshow (time in milliseconds between slides)(自动滑动,单位为毫秒)

continuous Boolean (default:true) - create an infinite feel with no endpoints(是否循环滑动,默认值为true)

disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page(停止任何触及此容器上滚动页面,默认值flase)

stopPropagation Boolean (default:false) - stop event propagation(停止事件传播,默认值flase)

callback Function - runs at slide change.(回调函数)

transitionEnd Function - runs at the end slide transition.(滑动过渡时调用的函数)

下面就是官方给的演示例子:

window.mySwipe = new Swipe(document.getElementById('slider'), {
 startSlide: 2,
 speed: 400,
 auto: 3000,
 continuous: true,
 disableScroll: false,
 stopPropagation: false,
 callback: function(index, elem) {},
 transitionEnd: function(index, elem) {}
});

从中我们不难看出具体参数的使用方法和位置。这一个如果感兴趣,可以根据需要,自己加入参数试试,都是以json对象存在于Swipe的第二个参数的。

那么除了以上参数,Swipe还提供了一些常用的方法(API):

prev() slide to prev(上一页)

next() slide to next(下一页)

getPos() returns current slide index position(获取当前索引位置)

getNumSlides() returns the total amount of slides(获取所有滑块总数)

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)(指数,持续时间)滑动设置索引位置(持续时间:转型速度以毫秒为单位)

都是一些简单的接口方法,你可以Js调用他们以达到你想要的效果。

下载地址:https://github.com/thebird/swipe/

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 #Javascript
js实现点击图片自动提交action的简单方法
Oct 16 #Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
You might like
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
python提取字典key列表的方法
2015/07/11 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
浅析Python 条件控制语句
2020/07/15 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
Eclipse面试题
2014/03/22 面试题
Hibernate持久层技术
2013/12/16 面试题
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
委托书英文
2015/01/28 职场文书
技术负责人岗位职责
2015/02/10 职场文书
财务工作个人总结
2015/02/27 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android