logo标签列表

使用jQuery和触摸设备支持的水平滑动滑块？

javascriptjqueryjquery-pluginscss
46

我需要制作一个像这样的产品滑块（见红色区域），具有动量的刷卡滑块。

它应该在桌面、iPad和移动浏览器上运行。您知道任何jquery / jquery移动插件可以实现这一点吗？

输入图像描述

我想要的效果几乎类似于http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html （但它不兼容触摸）

完全像苹果iPad应用程序中名为“预告片”的“前25名”部分。

输入图像描述

FYI：已删除jquery-mobile标签，因为OP在_Phill Pafford_的答案中评论说他在项目中没有使用jquery-mobile。 - Smamatti
15个回答
18
在我的看法中，iosSlider 是令人惊叹的。它可以在几乎任何设备上运行，并且有良好的文档支持。对于个人使用来说，它是免费的，但对于商业网站需要支付20美元的许可证费用。
同时，同一作者的touchCarousel 或 RoyalSlider 也是一个很棒的选择，这两个插件拥有你所需要的一切，但也不是免费的，价格为10-12美元。
16
我还需要桌面兼容性。 - Jitendra Vyas
我在两个不同的网站上都实现了iScroll，并且它们都不需要在全屏模式下查看网站才能进行滚动 - 而且在桌面和触摸设备上都可以正常工作，顺便说一句 - 这也适用于touchslider方法。 - Thomas
iScroll已经被dSquared提到过了，如果表单元素在同一页上，它会出现问题。 - Jitendra Vyas
15

如果我是你，我会基于事件规范实现自己的解决方案。基本上，滑动是处理按下、移动和抬起触摸事件。这是我自己用于处理iPhone触摸事件的代码片段：

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
10
此插件仅供个人/非盈利使用免费，单域名使用需支付20美元，我认为这太贵了。我建议使用iScroll，或从CodeCanyon购买付费的touchcarousel/royalslider。 - Marvin3
3
你认为20美元太贵了吗？我打赌你这个星期光是买咖啡就花了比这更多的钱。考虑到它可以帮你省去自己写作的时间，我不明白怎么会“太贵”。抱歉发牢骚，但我认为我们开发者有时需要重新审视自己的优先事项。让我们来鼓励那些辛勤工作的人们，他们并不是所有东西都能符合免费/开源理念。 - Michael Giovanni Pumo
4

请点击此处查看iScroll v4：http://cubiq.org/iscroll-4

iScroll v4虽然不是jQuery，但在桌面端、移动端和iPad上都能很好地工作；我已经在多个项目中使用它，并将其与jQuery结合使用。

祝你好运！

2
对于查看此线程的人，访问以下链接以查找库： https://github.com/Codeinwp/carouFredSel-jQuery http://coolcarousels.frebsite.nl/c/48/ http://docs.themeisle.com/article/499-getting-started-with-the-caroufredsel-jquery-plugin - Pristine Kallio
2

你见过WooThemes的FlexSlider吗？我在最近的几个项目中使用它，效果非常好。它还支持触摸功能，因此可以在基于鼠标和基于iOS和Android的触摸浏览器上使用。

1

我实际上已经为我的一个网站开发了类似的东西。

我使用了StepCarousel作为轮播图，因为它是我找到的唯一一个可以在同一个轮播图中接受不同图片尺寸的插件。

此外，为了添加触摸滑动效果，我使用了jquery.touchswipe插件；

而stepcarousel通过一个函数将面板向右或向左移动，所以我可以做到：

$("#slider-actu").touchwipe({
    wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
    wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
    min_move_x: 20
});

您可以在此页面查看实际渲染效果。

希望能对您有所帮助。

1
我找到了另一个：http://swipejs.com/ 它似乎工作得很好，但是在与Bootstrap配对时，在OS X版本的Chrome上遇到了问题。如果完全跨浏览器兼容性不是问题，那么你就没问题了。
我认为这确实是最好的解决方案。 - Xiao Xiao
1
抱歉，我从手机回复，没有意识到已经提到了。 - Sergio Majluf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接