使用bootstrap实现轮播图的触屏函数

最新推荐文章于 2023-08-23 16:39:10 发布

cfcp

最新推荐文章于 2023-08-23 16:39:10 发布

阅读量834

点赞数 1

文章标签： bootstrap css框架函数

本文链接：https://blog.csdn.net/qq_33562825/article/details/54816510

版权

Bootstrap 是css框架,其中为我们提供了响应式轮播图方法但是并没有为我们提供触屏滑动轮播图的功能，所以需要我们自己封装

移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

以下是实现触屏轮播图的实现适用于所有用bootstrap制作的轮播图

function banner () {
   var carousel = document.querySelector('.carousel');
    var startX=0;
    var moveX=0;
    var distance=0;
    //绑定触屏事件
    carousel.addEventListener('touchstart',function(e){
        //记录触屏开始的数据
        startX= e.targetTouches[0].clientX;
    })
    carousel.addEventListener('touchmove',function(e){
        //记录触屏开始的数据
        moveX= e.targetTouches[0].clientX;
        distance = moveX-startX;
    })
    //绑定触屏结束事件
    carousel.addEventListener('touchend',function(e){
        if(distance>0){
          $(this).carousel('prev');
        }
        if(distance<0){
          $(this).carousel('next');
        }
        //数据重置
        startX=0;
        moveX=0;
        distance=0;
    })
}