移动端滑动插件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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
ES6字符串的扩展实例
Dec 21 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下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
Python学习资料
2007/02/08 Python
python k-近邻算法实例分享
2014/06/11 Python
python实现删除文件与目录的方法
2014/11/10 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
详解django三种文件下载方式
2018/04/06 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python 私有化操作实例分析
2019/11/21 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
行政部岗位职责范本
2014/03/13 职场文书
干部考核评语
2014/04/29 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
大雁塔导游词
2015/02/04 职场文书
银行先进个人总结
2015/02/15 职场文书