有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考。

$(function () {
let $carousels = $('#carouselExampleSlidesOnly');
let start, // 初始值
end; // 结束值
$carousels.on('touchstart', function (e) {
start = e.originalEvent.touches[0].clientX;// 触摸开始时记录一下手指所在的坐标x
});
$carousels.on('touchmove', function (e) {
end = e.originalEvent.touches[0].clientX;// 离开屏幕一瞬间的坐标x
});
$carousels.on('touchend', function (e) {
let distance = Math.abs(start - end); // 获取差值
if (distance > 30) { //当差值大于30说明有方向的变化
$(this).carousel(start > end ? 'next' : 'prev'); //根据初始值和结束值的比较判断向前滑还是向后滑
}
})
})

根据bootstrap框架实现移动端触摸滑动的方法的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  3. 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  5. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  6. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  7. Html5 移动端 触摸滑动事件

    以下代码经过测试  没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"& ...

  8. Touch Punch在移动设备上面增加jQuery UI的触摸支持|Jquery UI 支持移动端 触摸滑动等

    jQuery UI是我们前台开发常用的UI前端类库,但是目前的jQuery UI用户界面类库在互动和widget上并不支持touch事件.这意味着你在桌面上设计的优雅的UI可能在触摸设备,例如,ipa ...

  9. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

随机推荐

  1. Alpha冲刺(1/10)——2019.4.23

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...

  2. datatable中的copy和clone的用法区分

    dt.copy();//复制结构和数据 dt.clone();//仅复制结构,不复制数据

  3. js中常用的正则表达式总结

    去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g,"") ...

  4. [CF893F] Subtree Minimum Query

    Description: 给定一棵树,每次询问某点子树中到其不超过k的所有点的最小点权 强制在线 Hint: \(n,m\le 10^5\) Solution: 看到题目第一反应是以深度为下标,dfs ...

  5. ODM、JDM、OEM概念

    OEM (Original Equipment Manufacturer) - 原始设备制造商 委托生产,或者说“代工生产”,其含义是品牌厂商不直接制造产品,而是负责设计和开发新产品,控制销售“渠道” ...

  6. myeclipse中的HTML页面在浏览器中显示为乱码

    myeclipse中的HTML页面在浏览器中显示为乱码 在通过myeclipse开发项目的过程中,如果用HTML页面书写前端,可能出现中文乱码现象,需要怎么解决呢?下面是我从网上搜的方法: 解决办法: ...

  7. 转发 Learning Go — from zero to hero

    原文:https://medium.freecodecamp.org/learning-go-from-zero-to-hero-d2a3223b3d86 Learning Go — from zer ...

  8. [LeetCode] Flipping an Image 翻转图像

    Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...

  9. CentOS 编译安装 Nodejs (实测 笔记 Centos 7.3 + node 6.9.5)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  10. 清理 zabbix 历史数据, 缩减 mysql 空间

    zabbix 由于历史数据过大, 因此导致磁盘空间暴涨,  下面是结局方法步骤 1. 停止 ZABBIX SERER 操作 [root@gd02-qa-plxt2-nodomain-web-95 ~] ...