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. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  2. 【ZZ】Web开发的入门指导 | 菜鸟教程

    Web开发的入门指导 http://www.runoob.com/w3cnote/a-beginners-guide-to-web-development.html

  3. Hive 体系结构

    1.Hive架构与基本组成     下面是Hive的架构图. 图1.1 Hive体系结构     Hive的体系结构可以分为以下几部分:     (1)用户接口主要有三个:CLI,Client 和 W ...

  4. Oracle VM VirtualBox安裝Windows 2000失败

    问题: VirtualBox下安装Windows2000,设置网络后进入最后一步,复制组件……然后就是重启:再试还是重启!   解决: 在Oracle网站上查了一下资料:http://www.virt ...

  5. javascript如何判断是手机还是电脑访问本网页

    var system ={}; var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac ...

  6. windows下手动安装pyinstaller(python2.7)

    1.首先,安装python2.7.13,官网下载msi版(windows直接安装): https://www.python.org/downloads/ 2.然后,到python包官网依次下载,fut ...

  7. SecureCRT 8.1使用经验总结

    1.反空闲设置: 2.文件上传下载 上传 sudo rz -y 文本文件勾选Upload files as ASCII,图片或其他飞文本文件,去掉勾选.采用默认binary 3.文件下载 sudo s ...

  8. 检测Python程序的执行效率

    无意中被问到代码执行效率的问题,那就总结一下检测代码执行效率的几种方式: 一.装饰器 在函数上加装饰器,来得到函数的执行时间. def cst_time(func, *args, **kwargs): ...

  9. Jenkins是什么?

    Jenkins 是一个可扩展的持续集成引擎. 主要用于: l 持续.自动地构建/测试软件项目. l 监控一些定时执行的任务. Jenkins拥有的特性包括: l 易于安装-只要把jenkins.war ...

  10. 让IE依据HTML头标签选择显示模式

    文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE ...