移动端滑动插件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 23 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
原生js中运算符及流程控制示例详解
Jan 05 Javascript
vue如何批量引入组件、注册和使用详解
May 12 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP动态图像的创建
2006/10/09 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
DOM事件探秘篇
2017/02/15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
python调用java的Webservice示例
2014/03/10 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python使用cPickle模块序列化实例
2014/09/25 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
python为什么要安装到c盘
2020/07/20 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
计算机工程学院个人求职信
2013/10/05 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
PHP 时间处理类Carbon
2022/05/20 PHP
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers