如何在移动网站的转盘上管理水平滚动? [英] How can I manage the horizontal scroll on a carousel in a mobile website?
问题描述
我有一个带有图片轮播的网站.在移动设备上，当我水平移动手指时，我想移动"该转盘.
I have a website with a carousel of images. On mobile, I'd like to "move" this carousel when I move the finger in horizontal.
此轮播已准备好使用jquery完成(但可以通过点击处理程序进行处理).我需要水平移动来处理它.
This carousel is ready to work, already done with jquery (but handle with a click handlers). I need handle it with horizontal movement.
是否有一个让我处理此动作的jQuery插件?
Is there a jquery plugin that allow me to handle this movement?
推荐答案
如果您使用的是jQuery mobile，则可以轻松使用滑动事件.
If you are using jQuery mobile you can easily use swipe events.
示例:
$("#carousel").bind('swipeleft',function(event, ui){
});
如果您不使用jQM，请查看以下框架: http://wipetouch.codeplex.com/.它是轻量级的.其他框架也很少，但我从未使用过.几个月前，我创建了一个带有轮播和jQM滑动事件的jQM应用程序.它工作正常，没有性能问题.
If you are not using jQM take a look at this framework: http://wipetouch.codeplex.com/. It is lightweight. There are also few other frameworks but I never used them. Few months ago I have created a jQM app with carousel and jQM swipe events. It works just fine, without performance problems.
这是一个有效的轮播示例(通过swipeleft事件，您也可以实现swiperight，但这只是一个示例):轮播和我对常见jQM滑动事件的实现的组合.您仍然只能将jQM框架用于滑动事件.
Here's an working carousel example (With swipeleft event, you can also implement swiperight but this is only an example) for you: http://jsfiddle.net/Gajotres/Np3G4/ I have tested it on my PC (just drag your mouse to the left) and Android 4.1 (swipe to left), but from my past experience it also works on iPad (so i believe it should work on iPhone). This code is combination of this carousel and my implementation of common jQM swipe events. You can still use jQM framework only for swipe events.
此版本可在没有jQuery移动框架的iPad上使用: http://jsfiddle.net/Gajotres/qCB6w/.它使用touchwipe框架: http://www.netcu.de/jquery-touchwipe- iphone-ipad-library .我希望这是使它正常工作所需要的.
This version works on iPad without jQuery mobile framework: http://jsfiddle.net/Gajotres/qCB6w/. It uses touchwipe framework: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library.I hope this is all you need to make it work.
这篇关于如何在移动网站的转盘上管理水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
