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

  // 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. API设计中防重放攻击

    HTTPS数据加密是否可以防止重放攻击? 否,加密可以有效防止明文数据被监听,但是却防止不了重放攻击. 防重放机制 我们在设计接口的时候,最怕一个接口被用户截取用于重放攻击.重放攻击是什么呢?就是把你 ...

  2. 百万年薪python之路 -- 内置函数

    内置对象(68个)第一部分 内置函数一共68个 一些可以重要性不高的内置函数,只需了解即可 all() any() bytes() callable() chr() ord() complex() d ...

  3. Java基础(二)数据类型

    数据类型主要分为基本类型和引用类型两大类. 一.基本类型 1.基本类型又分为数值类型和boolean类型, (1)数值类型包括浮点数类型.整数类型和字符类型 整型                    ...

  4. day3-02 python入门之基本的数据类型

    目录 一.整型(int) 二.浮点型(float) 三.字符串类型(str) 字符串在python2和python3中的细微区别 四.复数 五.列表(list) 六.数据字典(dict) 定义方式 七 ...

  5. django-模板之block(四)

    base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Java多线程(十五):CountDownLatch,Semaphore,Exchanger,CyclicBarrier,Callable和Future

    CountDownLatch CountDownLatch用来使一个线程或多个线程等待到其他线程完成.CountDownLatch有个初始值count,await方法会阻塞线程,直到通过countDo ...

  7. PLSQL Developer 超简单使用!!!

    PLSQL Developer 简介 PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对 ...

  8. C++学习笔记8_零碎的知识

    1. int main(void) { int arr[] = {1,2,3,4}; //数组的长度 int len = sizeof(arr)/sizeof(int); //由此可以看出,sizeo ...

  9. 网络安全-主动信息收集篇第二章-二层网络扫描之nmap

    nmap是网络层.传输层最重要的扫描工具之一,可以结合脚本对应用层的扫描和对网络弱点发现. 网络层发现nmap使用: Usage: nmap [Scan Type(s)] [Options] {tar ...

  10. CSPS Oct目标

    超过skyh 删了一些sb话,不过目标不会变的