swipe.js 使用方法
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 使用方法的更多相关文章
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- 基于zepto使用swipe.js制作轮播图demo
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- js调用php和php调用js的方法举例
js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...
- 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法
jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery 互相调用iframe页面中js的方法
1,子iframe内调用父类函数方法: window.parent.func(); 2,子Iframe中获取父界面的元素: $("#xx", window.parent.docum ...
- JS扩展方法——字符串trim()
转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...
随机推荐
- rsync 通过密码文件实现远程同步
https://my.oschina.net/yyping/blog/91964 1.源文件服务器:192.168.10.203 2.备份服务器:192.168.10.88 配置备份服务器(192.1 ...
- Tomcat 7 可以修改 Session 默认的 Cookie 名 JSESSIONID 了
Tomcat 7 可以修改 Session 默认的 Cookie 名 JSESSIONID 了 程序员必上的开发者服务平台 —— DevStore 看看下面这个配置: <Contex ...
- Fragment 横竖屏切换问题
转自:http://my.oschina.net/u/614511/blog/76444 在默认情况下当发生横竖屏切换时,当前Activity中的fragment都会通过Fragment.instan ...
- LAMP的安装和注意事项
LAMP--Linux+Apache(httpd)+MySQL+PHP,是常用的web服务器架构,下面接受编译安装的过程,以及出现的错误. 注意事项: 1. 扩展epel源:参照:http://www ...
- 视频描述(Video Captioning)调研
Video Analysis 相关领域介绍之Video Captioning(视频to文字描述)http://blog.csdn.net/wzmsltw/article/details/7119238 ...
- springboot 2.0 自定义redis自动装配
首先创建maven项目 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xm ...
- 20165233 实验二 Java面向对象程序设计
20165233 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步 ...
- 《OpenCL异构并行编程实战》第十二至十四章
▶ 第十二章,在其他语言中使用 OpenCL ● JOCL(Java Building for OpenCL),PyOpenCL ● 一个 PyOpenCL 的例子代码,需要 pyopencl 包 i ...
- mac使用备注
快捷键: 掌握好多手势和快捷键可以有效的提高工作效率,触控板和快捷键基本让你可以脱离鼠标. Command+Tab 任意情况下切换应用程序 - 向前循环 Shift ...
- 解决opencv3运行opencv2代码时报错的修改备忘录
虽然opencv3是基于opencv2进行开发的(一部分opencv2代码在opencv3中还能正常运行),但opencv3自身也做了部分修改,而目前网上很多教程还是基于opencv2的函数API来编 ...