Question

我在这里有一个网站：

www.completefaq.com

主页面包含一个我自己构建的滑块。它会在8秒后自动更改幻灯片。然后单击向前或向后按钮。但问题是，即使试图在触摸屏上滑动它，我也希望它滚动。

感谢任何帮助。我只能使用CSS，JavaScript，HTML和PHP，因为其他API（如JQuery）往往会减慢网站的速度。

Answer 1

由于你不想要一个jQuery插件，由于各种触摸平台之间的差异，它将是非平凡的，最终你可能最终会在重新发明轮子试图获得你需要的抽象。最重要的是，您的努力显然取决于您想要达到的准确度，因此建议您不要让图像响应每一个最小的触摸事件。

我相信你最好的选择是使用Tocca.js，这是一个非常有前景的独立脚本，它是“超轻量级”（仅1kB），旨在规范现有设备之间的触摸事件。

Hammer.js更准确，但在你的情况下可能会更重一些 QuoJS也很好，但它不仅仅关注触摸事件。

您可能会发现this和this这些问题很有趣。最后，您总是可以从几个现有的支持触摸的JavaScript图像滑块中获取灵感。

Answer 2

这是一个非常轻量级的脚本。将此脚本放在div＃features下面的某个位置，或者在dom ready上执行它。您可能需要最小滑动时间（200毫秒）和最小滑动距离（50px）：

var featured = document.getElementById("featured");
if( "ontouchstart" in window ) {
    var touchStart = function(evt) {
        var startTime = (new Date()).getTime();
        var startX = evt.changedTouches[0].pageX;
        var touchEnd = function(evt) {
            document.removeEventListener("touchend", touchEnd);
            var diffX = evt.changedTouches[0].pageX - startX;
            var elapsed = (new Date()).getTime() - startTime;
            console.log( "Swiped " + diffX + " pixels in " + elapsed + " milliseconds" );
            if( elapsed < 200 && Math.abs(diffX) > 50 ) {
                ( diffX < 0 ) ? slideright() : slideleft();
            }
        }
        document.addEventListener("touchend", touchEnd);
    };
    featured.addEventListener("touchstart", touchStart);
}

我知道您希望保持网站的轻量级，但如果您想通过这种简单的滑动进行更高级的手势识别，则必须采用某种框架。

如何在滑动屏幕上滚动滑块？

2 个答案: