Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动)。

  但是我使用一段时间后发现两个bug,所以在官方2.0(官网http://swipejs.com/)的基础上我做了一下优化,在这里定义为swipe2.1吧。

  两点优化:

  1、解决触摸滑动结束后停止自动播放的bug(代码分析,这里只提下修复bug的地方);

handleEvent: function(event) {
switch (event.type) {
case 'touchstart': this.start(event); break;
case 'touchmove': this.move(event); break;
case 'touchend': offloadFn(this.end(event)); //去掉滑动结束后的break
} end: function(event) {
element.removeEventListener('touchmove', events, false);
element.removeEventListener('touchend', events, false); //在这之后添加
delay = options.auto;
}

  2、解决不同高度的tab切换是,高度低的tab底部有大量空白的bug(代码分析,这里只提下修复bug的地方);

  

var height, heights = [];
function setup() {
  //前面不变...
  container.style.visibility = 'visible'; //在这之后加
container.style.height = slides[index].offsetHeight + 'px';//修复不同高度之间的切换
} function slide(to, slideSpeed) {
//前面不变...
offloadFn(options.callback && options.callback(index, slides[index])); //在这之后加
setHeight(to);
}
function setHeight(index){
//修复不同高度之间的切换
if(-1< index && index < slides.length){
height = slides[index].offsetHeight;
container.style.height = height + 'px';
}
}

  百度分享下载地址 swipe-2.1.min.js

Swipe2.1更新——移动Web内容滑块的更多相关文章

  1. [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

    原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...

  2. Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

    http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html responsive-carousel 是一个内容传送 ...

  3. Devrama Slider - 支持任意 HTML 的内容滑块

    Devrama Slider 是一个图片滑块,支持很多特色功能.除了支持图片滑动,其它的 HTML 内容也支持.主要特色:响应式.图片预加载.图片延迟加载.进度条.自定义导航栏和控制按钮等等. 在线演 ...

  4. 第十 构建Web内容的技术

    第十章 构建Web内容的技术 一.HTML HTML(HyperText Markup Language,超文本标记语言)是为了发送Web 上的超文本(Hypertext)而开发的标记语言.超文本是一 ...

  5. Hashslider – 带有 Hash 标签功能的 jQuery 内容滑块

    Hashslider 实现了常见的 jQuery 滑块的功能,特别之处在于给 URL 加上了标签,因此你能够连接到滑块的某块内容.滑块的内容也可以从外部的 HTML 文件获取. 您可能感兴趣的相关文章 ...

  6. 40 个顶级 jQuery 图片、内容滑块和幻灯片(转)

    在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...

  7. HTML与CSS入门——第二章 发布Web内容

    知识点: 1.使用文本编辑器创建一个基本的HTML文件的方法 2.使用FTP将文件传送到你的Web服务器的方法 3.文件在Web服务器上应该存储的位置 4.在没有Web服务器的情况下分发Web内容的方 ...

  8. SQL技巧两则:选择一个表的字段插入另一个表,根据其它表的字段更新本表内容

    最近,在作django数据表迁移时用到的. 因为在django中,我把本来一个字符型字段,更改成了外键, 于是,哦喝~~~字符型字段相当于被删除了, 为了能导入这些字段的外键信息,于是出此下策. 其实 ...

  9. 40 个顶级 jQuery 图片、内容滑块和幻灯片

    在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...

随机推荐

  1. 学习Java Web开发

    学习DreamWaveMX中文版的网页设计技术 HTML网页设计,这是最基本的.学习XML的一些基本知识.初步掌握一些JSCRIPT的应用. 学习JAVA语言. 这应该分成2次来进行: 第1次找一本国 ...

  2. [原]Unity3D深入浅出 - Shader基础开发

    概述 简单来讲,shader是为渲染管线中的特定处理截断提供算法的一段代码.Shader是伴随着可编程渲染管线出现的,开发者可使用Shader对渲染过程加以控制,拥有更大的创作控件,因此Shader的 ...

  3. 卸载sqlserver数据库参考

    这多半是以前安装过MSSQL,没卸载干净导致的. 解决方法如下: 一.先把MSSQL卸载干净 1.在添加删除程序中把SQL Server卸载 :2.把Microsoft SQL Server文件夹整个 ...

  4. easyui资源

    官网地址:http://www.jeasyui.com/index.php(相关文档示例,有demo, tutorial, documentation) 未混淆的源码:http://jquery-ea ...

  5. Java [leetcode 13] Roman to Integer

    问题描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...

  6. mysql CMAKE 参数说明

    MySQL自5.5版本以后,就开始使用CMake编译工具了,因此,你在安装源文件中找不到configure文件是正常的.很多人下到了新版的MySQL,因为找不到configure文件,不知道该怎么继续 ...

  7. 进程通信之一 使用WM_COPYDATA C++及C#实现 z

    原文地址:http://blog.csdn.net/morewindows/article/details/6804157 进程间通信最简单的方式就是发送WM_COPYDATA消息.本文提供C++及C ...

  8. NGINX开篇

    前言 最近空闲时间比较多, 开始阅读nginx源码, 阅读的过程总结和笔记整理了下, 汇集成了一个系列的文章, 由于nginx功能实在太多, 没法做到面面俱到, 只对已经阅读过的源码进行记录总结, 以 ...

  9. POJ 3208-Apocalypse Someday(数位dp)

    题意:给定n,输出第n大包含666的数字. 分析:dp[i][j][k][l]表示 长度为i,当前位是否是6,前一位是否6,是否已经包含666,表示的数量,再用二分找出第n大的这样的数字. #incl ...

  10. 设计模式_Visitor_访问者模式

    形象例子: 情人节到了,要给每个MM送一束鲜花和一张卡片,可是每个MM送的花都要针 对她个人的特点,每张卡片也要根据个人的特点来挑,我一个人哪搞得清楚,还是找花店老板和礼品店老板做一下Visitor, ...