时间戳

首页 > 解决方案 > Javascript - ：Slider On touch 未按预期工作

javascript - Javascript - ：Slider On touch 未按预期工作

问题描述

我正在制作一个自定义滑块。

所有的东西都能找到。但到目前为止，我还想添加 ontouch、ontouchmove 功能。我几乎实现了，但仍然有问题，这就是为什么我无法完全实现它。

代码片段

function onDragAction (e) {
    e = e || window.event;

    if (e.type == 'touchmove') {
      caouselPosX2 = caouselPosX1 - e.touches[0].clientX;
      caouselPosX1 = e.touches[0].clientX;
    } else {
      caouselPosX2 = caouselPosX1 - e.clientX;
      caouselPosX1 = e.clientX;
    }
            carouselInneritems.style.transform = 'translateX(' + (carouselInneritems.offsetLeft - caouselPosX2) + 'px)';
}

请尝试使用移动分辨率进行检查的演示。

代码笔

标签： javascript

解决方案

我玩过这个，据我所知有两个主要问题。

  1. onDragAction()需要调用e.stopPropagation()- 在您发布的演示中，每次新幻灯片进入鼠标下方时都会调用它，但您只希望调用一次。这为我解决了很多问题。

  2. 您需要有一些条件逻辑来表达您希望滑块进入的方向。目前它在每种情况下都是通过减法计算的，从我通过阅读您的代码汇总的内容来看，它总是会转到左边。

推荐阅读