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> ...
随机推荐
- AngularJS 最佳实践
AngularJS 是一个 Web 应用框架,它实现了前端的 MVC 架构,能让开发人员很方便地实现业务逻辑. 举个栗子,要做到下面的效果,以前可能需要写一连串的 JavaScript 代码绑定 N ...
- [C++ Primer] 第9章: 顺序容器
顺序容器概述 顺序容器的类型有: 类型 说明 vector 可变长度数组. 支持快速随机访问. deque 双端队列. 支持快速随机访问. list 双向链表. 只支持双向顺序访问. forward_ ...
- RDLC报表系列二
---------------------ReportServer数据库权限表说明------------------ --用户表 select * from Users --角色表 select * ...
- HDU 3179 二叉搜索树(树的建立)
二叉搜索树 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- [转]MVC 分页
本内容代码段抄自传智视频 /// <summary> /// 数据库分页 /// </summary> static List<dynamic> GetPageLi ...
- mysql-12序列使用
mysql序列是一组整数:1,2,3....,由于一张数据表只能有一个字段自增主键,如果你想实现其他字段自动增加,就可以使用mysql序列来实现. 使用auto_increment来定义列 drop ...
- [置顶]
linux c常用函数 (待完善)
(1)字符测试函数 isalnum(测试字符是否为英文字母或数字) isalpha(测试字符是否为英文字母) isascii(测试字符是否为ASCII码字符) isblank(测试字符是否为空格字符) ...
- HTTP协议响应头之Transfer-Encoding:分块传输详解
Http Connection有两种连接方式:短连接和长连接:短连接即一次请求对应一次TCP连接的建立和销毁过程,而长连接是多个请求共用同一个连接这样可以节省大量连接建立时间提高通信效率.目前主流浏览 ...
- phpcms 实现动态价格
什么是动态价格(自命名)?—— 一般来说商品有个固定的价格,随着节假日或者促销活动可能会发生价格变化,结束后又恢复原价,如果每次价格变化都需要修改价格,那么不仅在时间上不好把握,也需要消耗更多的人力 ...
- C++Builder 代码编辑器 回车自动补充括弧
两大问题 括弧和折叠 一.括弧 XE7,回车,自动补充括弧} 好用,有时候不准确,代码量多,不知道什么原因就引起错误,总是多一个括弧,一回车就加一个括弧,都不敢回车写代码了,怎么关闭此选项? 找到了, ...