支持jQuery和触控设备的水平滑动滑块？

Question

我需要制作一个像这样的产品滑块(参见红色区域)滑动滑块的动量.

它应该适用于桌面,iPad和移动浏览器.你知道任何jquery/jquery移动插件来实现这一目标吗？

我想要的效果几乎类似于这个http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html(但它不兼容)

和Apple名为"Trailers"的iPad应用程序中的"Top 25"部分完全一样

Answer 1

在我看来iosSlider太棒了.它适用于几乎所有设备,并且有很好的文档记录.它可以免费供个人使用,但对于商业网站,许可费用为20美元.

另外一个很好的选择是来自同一作者的touchCarousel或RoyalSlider.这两个有你需要的一切,但也不是免费的,价格为10-12美元

Answer 2

我也推荐http://cubiq.org/iscroll-4

但是如果你没有挖掘那个尝试这个插件

http://www.zackgrossbart.com/hackito/touchslider/

它工作得很好,默认为桌面上的水平滑动条 - 它在桌面上不如iscroll-4那么优雅,但它在触摸设备上运行良好

祝好运!

Answer 3

如果我是你,我会根据事件规范实现我自己的解决方案.基本上,滑动是什么 - 它是触摸,触摸移动,触摸事件的处理.这里是我自己的lib的摘录,用于处理iPhone touch事件:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

我用那段代码"移动东西".但是,您可以创建自己的算法,例如触发重定向到其他位置,而不是移动,或者您可以使用该移动来"移动/滑动"滑动所在的元素到其他位置.

因此,了解事物的基本知识然后创建更复杂的解决方案确实很有帮助.这也许有帮助.

我用它来创建我的解决方案:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 4

你试过iosSlider吗？它可以完全满足您的需求.

http://iosscripts.com/iosslider-jquery-horizo​​ntal-slider-for-iphone-ipad-safari/

Answer 5

在这里查看 iScroll v4： http: //cubiq.org/iscroll-4

它可能不是 jQuery，但它在桌面移动设备和 iPad 上运行得很好；我在很多项目中使用过它，并将它与 jQuery 结合起来。

祝你好运！