1. var isTouch=('ontouchstart' in window);
  2. if(isTouch){
  3. $(".carousel").on('touchstart', function(e){
  4. var that=$(this);
  5. var touch = e.originalEvent.changedTouches[];
  6. var startX = touch.pageX;
  7. var startY = touch.pageY;
  8. $(document).on('touchmove',function(e){
  9. touch = e.originalEvent.touches[] ||e.originalEvent.changedTouches[];
  10. var endX=touch.pageX - startX;
  11. var endY=touch.pageY - startY;
  12. if(Math.abs(endY)<Math.abs(endX)){
  13. if(endX > ){
  14. $(this).off('touchmove');
  15. that.carousel('prev');
  16. }else if (endX < -){
  17. $(this).off('touchmove');
  18. that.carousel('next');
  19. }
  20. return false;
  21. }
  22. });
  23. });
  24. $(document).on('touchend',function(){
  25. $(this).off('touchmove');
  26. });
  27. }

让BOOTSTRAP默认SLIDER支持触屏设备的更多相关文章

  1. javascript如何判断访问网页的设备及是否支持触屏功能

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

  2. 在触屏设备上面利用html5裁剪图片

    前言 如今触屏设备越来越流行,并且大多数已经支持html5了.针对此.对触屏设备开发图片裁剪功能, 让其能够直接处理图片.减轻服务端压力. 技术点 浏览器必须支持html5,包含fileReader. ...

  3. 在触屏设备上面利用html5裁剪图片(转)

    前言 现在触屏设备越来越流行,而且大多数已经支持html5了.针对此,对触屏设备开发图片裁剪功能, 让其可以直接处理图片,减轻服务端压力. 技术点 浏览器必须支持html5,包括fileReader, ...

  4. jquery -- 触屏设备touch事件

    几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend ...

  5. 在触屏设备中拖动 overflow 元素

    在 Android 和 iOS 等触屏设备中,如果网页中某元素设置 overflow: auto 或者 overflow:scroll,那么问题就来了.在 Android 3.0 之前以及 iPhon ...

  6. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  7. 支持触屏的jQuery轮播图插件

    移动轮播图我看到两类, 一款是无线天猫的m.tmall.com和携程,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似天猫. 1.页面代码 <!DOCTYPE html ...

  8. Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  9. 解决电脑访问Discuz!手机版(支持触屏版)

    discuz电脑访问手机版的方法现在需要来修改一下2个文件,即可用电脑浏览discuz的手机版本:找到./source/function/function_core.php 文件,查找 : funct ...

随机推荐

  1. display:inline-block元素间空白间隙问题

    display:inline-block元素间有空白间隙,可以在父元素上加font-size:0

  2. Mongodb介绍

    MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前noSql数据库产品中最热门的一种.它在许多场景下用于替代传统的关系型数据库或键值对存储方式,MongoDB是用C++开发,MongoD ...

  3. pyshp操作shapefile

    ESRI的shp文件自1998发布技术文档以来,shp作为GIS文件的基本交换文件广为使用. 工作中使用shp文件的机会比较多,pyshp是Python操作shapefile的包. 先来说shp文件的 ...

  4. apache+tomcat 负载均衡

    说明:本篇不面向无开发基础的人员,所以不会有软件下载,jdk安装等步骤.比较久远的东西了...... 1.系统环境 win7-64.jdk 2.软件列表: apache_2.2.24-x64-no-s ...

  5. Js通过原型继承创建子类

    //定义一个有两个方法的类 function Person(){} Person.prototype.married = function(){}; Person.prototype.unmerrie ...

  6. 2D多边形碰撞器优化器

    http://www.unity蛮牛.com/thread-19827-1-1.html http://pan.baidu.com/s/1qW2mWS8 Asset Store Link: http: ...

  7. Error -27791: Server xx has shut down the connection prematurely

    最近在进行一次性能测试中遇到一个问题,并发较大的时候会出现LR出现Error -27791: Server xx has shut down the connection prematurely的ER ...

  8. [TSP+floyd]POJ3311 Hie with the Pie

    题意: 给i到j花费的地图 1到n编号   一个人要从1遍历n个城市后回到1 求最小的花费(可以重复走) 分析 http://www.cnblogs.com/Empress/p/4039240.htm ...

  9. 如何在Oracle11中配置st_shapelib

  10. HTML5标签一览

    HTML5标签一览,点击下载 访问密码:1907