移动端滑动插件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乱码的一次解决过程 图解教程
Feb 20 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
Node.js的进程管理的深入理解
Jan 09 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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在线打包程序源码
2008/07/27 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
softmax及python实现过程解析
2019/09/30 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
书法比赛获奖感言
2014/02/10 职场文书
房屋租赁意向书
2014/04/01 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
作文批改评语大全
2014/04/23 职场文书
解放思想演讲稿
2014/09/11 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
给老婆的检讨书
2015/01/27 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Redis可视化客户端小结
2021/06/10 Redis
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server