Javascript 触摸图像滑块：下一个/上一个键干扰当前幻灯片的代码
我有一个图像滑块，可以通过鼠标拖放或用手指在触摸屏上滑动移动到下一个或上一个图像。到目前为止，一切顺利。 但由于刷卡是相当棘手的，比如说，笔记本电脑触摸板，我想添加下一个/上一个按钮毕竟。现在我的问题是，他们弄乱了触摸和鼠标手势的代码 造成的错误有： 页面首次加载后，在任何触摸或鼠标手势之前， 要更改幻灯片，需要单击“下一步”按钮两次 在任何方向的鼠标或触摸事件后，下一个或上一个 要更改幻灯片，需要单击两次按钮 到达滑块末端然后滑回起点后，无法到达第一个滑块滑块在滑块2处停止 这可能与此无关，但另一个已知的错误是：有时幻灯片在尝试滑动时会粘在光标上。我在Chrome浏览器和Opera浏览器中体验过这种情况，但在Firefox中没有，我还不知道为什么会发生这种情况。 我已经使用console.log和开发工具来确定和检查这些错误。因为我发现这个滑块的问题很难解释，所以我制作了一个代码示例 //set-n用于通过JS在CSS中计算 //.容器及其包含的子映像数： const_C=document.querySelector.slider-container， N=_C.儿童长度； _C.style.setProperty-n，n； //检测touchstart或mousedown事件之间的运动方向 //以及触摸或鼠标移动事件 //然后相应地更新-i当前幻灯片 //并移动容器，使所需方向上的下一个图像移动到视口中 //在鼠标向下/触摸启动时，锁定x坐标 //并将其存储到初始坐标变量x0中： 设x0=null； 让锁定=假； 函数锁{ x0=unifye.clientX； //移除。平滑类 _C.classList.togglesmooth，！locked=true； } //接下来，在用户滑动时移动图像： //是否执行了锁定操作（如x0已设置）？ //如果是，读取当前x坐标并将其与x0进行比较 //根据这两者之间的差异，确定下一步要做什么 设i=0；//柜台 让w//图像宽度 //调整大小时更新图像宽度w 函数大小{ w=窗宽； } 函数移动{ 如果锁定{ //将阈值设置为20%如果小于20%，则不要拖动到下一个图像 //dx=用户拖动的像素数 设dx=unifye.clientX-x0， s=Math.signdx， f=+s*dx/w.toFixed2； //Math.signdx返回1或-1 //根据这一点，滑块会向后或向前移动 如果i>0 | s<0&&iJavascript 触摸图像滑块：下一个/上一个键干扰当前幻灯片的代码,javascript,css,slider,Javascript,Css,Slider,我有一个图像滑块，可以通过鼠标拖放或用手指在触摸屏上滑动移动到下一个或上一个图像。到目前为止，一切顺利。 但由于刷卡是相当棘手的，比如说，笔记本电脑触摸板，我想添加下一个/上一个按钮毕竟。现在我的问题是，他们弄乱了触摸和鼠标手势的代码 造成的错误有： 页面首次加载后，在任何触摸或鼠标手势之前， 要更改幻灯片，需要单击“下一步”按钮两次 在任何方向的鼠标或触摸事件后，下一个或上一个 要更改幻灯片，需要单击两次按钮 到达滑块末端然后滑回起点后，无法到达第一个滑块滑块在滑块2处停止 这可能与此无关，但