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

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

来源

2011-11-20 15:01:48 jancha

你可能会喜欢下面：

jQuery Mobile Carousel（github）
jQuery Mobile

我意识到这不是一个jQuery解决方案，但Sencha Touch framework非常适合构建目标用户界面。示例（点击旋转木马侧边栏链接）： http://dev.sencha.com/deploy/touch/examples/kitchensink/

来源

2011-11-20 15:32:51 moey

我希望你会添加一些视觉线索，该特定区域可以滑过触摸;也许增加一个左/右箭头？这听起来可能有点无聊，但它会产生一种更好的视觉效果。 – moey

这一个可能适合您的需要：
http://caroufredsel.frebsite.nl/

在配置支持触控添加jquery Touchwipe

然后加入

scroll : { 
wipe: true 
}

来源

2011-12-05 10:36:18

该网站http://caroufredsel.frebsite.nl/已关闭。 –

对于查看此主题的人，请访问以下链接以查找库： 'https：// github.com/Codeinwp/carouFredSel-jQuery' 'http：// coolcarousels.frebsite.nl/c/48 /' 'http：// docs.themeisle.com/article/499-getting-the-caroufredsel-jquery-plugin' –

你试过iosSlider吗？它可以做到你所需要的。

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

来源

2012-03-21 03:23:53 Marcus

这个插件是免费的，只适用于个人/非盈利用途，它的单个域名花费20美元，这是太多了。我建议使用iCroll，或CodeCanyon的付费touchcarousel/royalslider。 – Marvin3

@tMagwell你认为20美元太多了？我敢打赌，你本周仅仅在咖啡上的花费就更多。对于那些可以让你自己写的东西而言，我没有看到那是多么的“太多”。对不起，我认为我们的开发者有时需要把我们的优先事项弄清楚。让我们奖励一些人正在做的努力 - 不是所有的东西都会在免费/开源的理想下运行。 –

我已经somthink这样的，我的网站accualy在DEVELOPPEMENT之一。

我已经使用StepCarousel为caroussel，因为它是我发现的唯一一个可以接受不同的图像大小在同一个卡鲁塞尔。

除了这个添加触摸滑动效果，我已经使用了jquery.touchswipe插件;

而且stepcarousel移动面板分辩或用fonction离开，所以我可以做：

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

您可以查看实际呈现在this page

希望能够帮助您。

来源

2012-06-06 14:10:35 DoubleYo

在我看来iosSlider是惊人的。它几乎适用于任何设备，并且有很好的文档记录。它是免费的个人使用，但商业网站许可证费用20美元。

另外一个不错的选择是touchCarousel或RoyalSlider来自同一作者。这两个有你需要的一切，，但也不是免费的，并有一个价格$ 10-12

来源

2012-06-07 13:13:57

你见过FlexSlider来自WooThemes？我已经在最近的几个项目中使用过它，取得了巨大的成功它也支持触摸，因此它可以在基于鼠标的浏览器以及iOS和Android的基于触摸的浏览器上运行。

来源

2012-08-28 16:03:18 DesignerBrent

结帐Portfoliojs jQuery插件：http://portfoliojs.com

这个插件支持触摸设备，桌面和移动浏览器。此外，它具有预加载功能。

来源

2012-09-26 17:07:47 abhiomkar

香港专业教育学院发现了另：http://swipejs.com/

似乎但是，我遇到一个与它的问题时的Chrome OS X版本的引导配对很好地工作。如果跨浏览器的兼容性不是问题，那么你就是个好主意。

来源

2013-01-03 17:02:01 MrShmee

我想说这是真正的最佳解决方案。 –

随着我的体验，最好的开源选项将是UIKIT及其uikit slider component。而且它很容易实现，例如在你的情况下你可以做这样的事情。

<div data-uk-slider> 
<div class="uk-slider-container"> 
    <ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements 
     <li>...</li> //slide elements 
     ... 
    </ul> 
</div>

来源

2016-03-25 14:11:44

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

回答

相关问题