移动端滑动插件Swipe教程

 更新时间:2016年10月16日 11:55:59   投稿:hebedich  
swipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等。经常可见使用在移动前端开发中。

前言

最近需要开发一个新的“微信活动平台”,手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了,遂又重新找了一个下有没有什么好的幻灯片插件,毕竟重复造轮子没有必要啊。

综合比较后发现,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/

相关文章

  • 详解JS判断页面是在手机端还是在PC端打开的方法

    详解JS判断页面是在手机端还是在PC端打开的方法

    这篇文章主要介绍了JS判断页面是手机端还是在PC端打开的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • egg.js的基本使用和调用数据库的方法示例

    egg.js的基本使用和调用数据库的方法示例

    这篇文章主要介绍了egg.js的基本使用和调用数据库的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • layui-select动态选中值的例子

    layui-select动态选中值的例子

    今天小编就为大家分享一篇layui-select动态选中值的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript运动框架 多物体任意值运动(三)

    JavaScript运动框架 多物体任意值运动(三)

    这篇文章主要为大家详细介绍了JavaScript运动框架的第三部分,多物体任意值运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Echarts中X轴/Y轴坐标标签显示不下的问题解决

    Echarts中X轴/Y轴坐标标签显示不下的问题解决

    本文主要介绍了Echarts中X轴/Y轴坐标标签显示不下的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    这篇文章主要介绍了微信小程序 wx.login解密出现乱码的问题解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • Js检查变量类型的代码()

    Js检查变量类型的代码()

    本文章为你提供一款js 返回变量的类型代码哦,如果你不懂得如何获取js变量的类型的话,看看我们下面的代码你就知道如何获取js变量的代码哦。
    2010-07-07
  • js定时器怎么写?就是在特定时间执行某段程序

    js定时器怎么写?就是在特定时间执行某段程序

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下,感兴趣的朋友不要错过
    2013-10-10
  • Three.js 再探 - 写一个微信跳一跳极简版游戏

    Three.js 再探 - 写一个微信跳一跳极简版游戏

    最近项目结束,很空闲,于是就试着仿照微信跳一跳写了一个极简版的游戏,到底简单到什么程度呢?大家可以参考下本文
    2018-01-01
  • 原生js实现自定义滚动条

    原生js实现自定义滚动条

    这篇文章主要为大家详细介绍了原生js实现自定义滚动条,可点击、拖动到达,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01

最新评论