移动端滑动插件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 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
node.js 如何监视文件变化
Sep 01 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
类似于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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
MooTools 1.2介绍
2009/09/14 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue跨域解决方法
2017/10/15 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
python列表操作实例
2015/01/14 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Puppeteer使用示例详解
2019/06/20 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python 字典套字典或列表的示例
2019/12/16 Python
python标准库OS模块详解
2020/03/10 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
大学生个人简历中的自我评价
2013/12/27 职场文书
对教师的评语
2014/04/28 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
教你用python控制安卓手机
2021/05/13 Python
python blinker 信号库
2022/05/04 Python