1.插件要求的css样式:

<style>
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > li {
float:left;
width:100%;
position: relative;
}

</style>

2.JS代码:

<script>
var el = document.querySelector('.view');
var mySwipe = Swipe(el, {
startSlide: 6,
auto: 2000,
callback: function(key, el) {

},
transitionEnd: function(index, elem) {
console.log(index, elem);
}
});
</script>

swipe.js 使用方法的更多相关文章

  1. swipe.js 2.0 轻量级框架实现mobile web 左右滑动

    属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...

  2. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  3. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...

  4. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  5. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  6. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  7. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. jQuery 互相调用iframe页面中js的方法

    1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...

  9. JS扩展方法——字符串trim()

    转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...

随机推荐

  1. android adb端口被占用解决方法

    1.输入adb devices命令 C:\Users\Nick>adb devices List of devices attached adb server version (31) does ...

  2. win xp 环境变量PATH默认值

    %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem

  3. Mysql慢查询日志过程

    原创地址 :http://itlab.idcquan.com/linux/MYSQL/922126.html mysql慢查询日志对于跟踪有问题的查询非常有用,可以分析出代码实现中耗费资源的sql语句 ...

  4. Java-Runoob-高级教程-实例-环境设置实例:4.Java 实例 – 如何查看当前 Java 运行的版本?

    ylbtech-Java-Runoob-高级教程-实例-环境设置实例:4.Java 实例 – 如何查看当前 Java 运行的版本? 1.返回顶部 1. Java 实例 - 如何查看当前 Java 运行 ...

  5. Linux下搭建企业共享目录方案之------samba

    Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种通 ...

  6. java中的DAO设计模式

    创建数据库和表 sql语句: DROP TABLE IF EXISTS product; CREATE TABLE product( product_id varchar(20) NOT NULL, ...

  7. python入门第3篇 pycharm安装及使用

    内容: 1. python开发工具的介绍及安装 2.pycharm的设置及技巧 一.python开发工具的介绍及安装 python下载后就自带了一个官方的IDE,官方的IDE我个人觉得不是很好用,所以 ...

  8. apache 搭建PHP多站点

    修改apache 配置文件:httpd.conf 1.默认 Listen 80端口 2.添加配置如下: <VirtualHost *:80> ServerAdmin admin@yii.c ...

  9. javascript instanceof,typeof的区别

    区分string 与 String的区别 为什么结果会是false呢? <script type="text/javascript"> var aColors = [& ...

  10. padding margin border 和元素大小

    元素占用宽度 = 元素宽度+padding+border+margin 注意margin只是隔开元素,不会使得元素变大,而padding会使得元素变大,也就是说 元素真实宽度=元素宽度+padding ...