移动端滑动插件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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js 替换
Feb 19 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php使用百度天气接口示例
2014/04/22 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python之pandas用法大全
2018/03/13 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
银行内勤岗位职责
2014/04/09 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis