通过手指的滑动来控制轮播图中的图片内容的切换

  // 1. 获取手指在轮播图元素上的一个滑动方向(左右)

  // 获取界面上的轮播图容器
var $carousels = $('.carousel');
var startX, endX;
var offset = 50; //设置滑动的偏移量
// 注册滑动事件
$carousels.on('touchstart', function(e) {
// 手指触摸开始时记录一下手指所在的坐标X
startX = e.originalEvent.touches[0].clientX;
// console.log(startX);
}); $carousels.on('touchmove', function(e) {
// 变量重复赋值
endX = e.originalEvent.touches[0].clientX;
// console.log(endX);
});
$carousels.on('touchend', function(e) {
console.log(e);
// 结束触摸一瞬间记录最后的手指所在坐标X
// 比大小
// console.log(endX);
// 控制精度
// 获取每次运动的距离,当距离大于一定值时认为是有方向变化
var distance = Math.abs(startX - endX);
if (distance > offset) {
// 有方向变化
// console.log(startX > endX ? '←' : '→');
// 2. 根据获得到的方向选择上一张或者下一张
// - $('a').click();
// - 原生的carousel方法实现 http://v3.bootcss.com/javascript/#carousel-methods
$(this).carousel(startX > endX ? 'next' : 'prev');
}
});

倒数第三行的代码中使用$(this)  原因在于通过var $carousels = $('.carousel');可以获取到页面中的全部的轮播图,this用来指示更改当前触发的轮播图。

Bootstrap中手指控制轮播图切换的更多相关文章

  1. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  2. 解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

    我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChi ...

  3. <day006>bootstrap的简单学习 + 轮播图

    任务1:bootstrap的简单学习 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  4. avalon.js中使用owl-carousel轮播图

      <?php if($banners){?> <div class="ms-controller" ms-controller="bannerShow ...

  5. 轮播图切换 纯html+js+css

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码代码如下: <div class="wrapper"> <div id=&quo ...

  6. 微信小程序中自定义swiper轮播图面板指示点的样式

    重置样式: .swiper{ width: 100%; height: 240px; margin-bottom: 0.5rem; position:relative; } div.wx-swiper ...

  7. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. 使用Vue-MUI轮播图失效问题解决案例(在Vue的update中执行)

    我使用的是mui+vue,社区关于轮播图失效的问题也有几个.我这边遇到的一个情况是我把所有的东西都写到plusReady事件中会导致轮播图搞死都不动,按照其他问答解决了vue生命周期等等的问题.提出来 ...

随机推荐

  1. 【RabbitMQ 实战指南】一 RabbitMQ入门

    1.消息中间件 1.1.什么是消息中间件 消息中间件(Message Queue Middleware,简称 MQ)是指利用高效可靠的消息传递机制进行与平台无关的数据交流,并基于数据通道来进行分布式系 ...

  2. Python编程系列---装饰器执行的底层原理及流程

    代码中No.1  No.2 ...表示执行流程 """No.1 No.2 ...表示执行流程""" def set_func(func): ...

  3. SSH框架项目配置和启动的加载顺序及请求的执行顺序

    1:======配置和启动====== (1)配置web.xml 配置<context-param>,其中内容为Spring的配置文件applicationContext.xml.注意&l ...

  4. Qt 表格的使用

    参考 http://doc.qt.io/qt-5/qtablewidget.html http://doc.qt.io/qt-5/qtablewidgetitem.html https://blog. ...

  5. 百万年薪python之路 -- 面向对象初始

    面向对象初始 1.1 面向过程编程vs函数式编程 函数编程较之面向过程编程最明显的两个特点: 1,减少代码的重用性. 2,增强代码的可读性. 1.2 函数式编程vs面向对象编程 面向对象编程:是一类相 ...

  6. 判断浏览器是否支持指定CSS属性和指定值

    /** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...

  7. QlikSense 2018.2月版起支持主题开发

    自定义主题开发 // 主题是qliksense 2018年2月版提出,4月版正式实施,其实就是去修改sense默认的.json文件和.css文件 { // 定义自定义主题是否从默认主题(Sense C ...

  8. ubuntu18.04 flink-1.9.0 Standalone集群搭建

    集群规划 Master JobManager Standby JobManager Task Manager Zookeeper flink01 √ √ flink02 √ √ flink03 √ √ ...

  9. httprunner-2-linux下搭建hrun(下)

    前言 前面我们说了linux下安装python3,hrun是需要依赖数据库,我们用docker进行安装mysql5.7让数据库能正常连接.安装mysql5.7请参考:https://www.cnblo ...

  10. Mycat分布式数据库架构解决方案--配置defaultAccount属性报错解决方案

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 该文章 ...