jquery - 如何在移动网站中管理轮播上的水平滚动？

Question

我有一个带有图像轮播的网站。在移动设备上，当我水平移动手指时，我想“移动”这个旋转木马。

这个轮播已准备好工作，已经使用 jquery 完成（但使用点击处理程序处理）。我需要通过水平移动来处理它。

是否有一个 jquery 插件可以让我处理这个动作？

Answer 1

如果您使用 jQuery mobile，您可以轻松使用滑动事件。

例子：

$("#carousel").bind('swipeleft',function(event, ui){

});

如果您不使用 jQM，请查看以下框架：http ://wipetouch.codeplex.com/ 。它很轻。还有一些其他框架，但我从未使用过它们。几个月前，我创建了一个带有轮播和 jQM 滑动事件的 jQM 应用程序。它工作得很好，没有性能问题。

编辑 ：

这是一个工作轮播示例（使用 swipeleft 事件，您也可以实现 swiperight，但这只是一个示例）：http: //jsfiddle.net/Gajotres/Np3G4/我已经在我的 PC 上对其进行了测试（只需将鼠标拖动到左侧）和 Android 4.1（向左滑动），但根据我过去的经验，它也适用于 iPad（所以我相信它应该适用于 iPhone）。这段代码是这个轮播和我对常见 jQM 滑动事件的实现的组合。您仍然可以将 jQM 框架仅用于滑动事件。

编辑2：

此版本适用于没有 jQuery 移动框架的 iPad：http: //jsfiddle.net/Gajotres/qCB6w/。它使用 touchwipe 框架： http: //www.netcu.de/jquery-touchwipe-iphone-ipad-library。我希望这就是让它工作所需的一切。