8

有许多 JavaScript 或 CSS 触摸滑动滑块，但它们似乎都只允许垂直或水平滑动幻灯片。有什么东西可以同时在一张幻灯片上，所以我可以在一张幻灯片上水平和垂直滑动？

4

3 回答 3

4

我不是 100% 确定这是否是您正在寻找的，但它看起来非常接近：

iDangero.us Swiper。

http://www.idangero.us/sliders/swiper/

允许在另一个水平旋转木马/滑块内垂直滑动框。我一直在寻找同样的东西，这是我找到的最接近我正在寻找的插件。一点点黑客/操纵可能会让它做你想要的。

于 2012-10-26T16:58:06.720 回答
2

这是创建水平和垂直滑块的简单方法

<script>
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle)
{
    Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true});
} 
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle)
{
    Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true});
}
</script>

<body>
    <div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>

如果您查看代码，唯一应该更改的代码是 MM_effectSlide1、2、3 等等

于 2014-12-23T09:47:23.030 回答
1

您可以使用fullPage.js完全按照您的描述进行滑动，如演示页面所示。

fullPage.js 的唯一问题是缺少 1:1 的触摸动作。因此，只要您将手指放在屏幕上，就不会控制滑动，脚本有一个可配置的变量，表示一旦满足屏幕高度/宽度的 X% 的阈值滑动。这行得通，但感觉不如RoyalSlider 之类的具有 1:1 触摸运动的东西好；因此，如果您只滑动 49% 的方式，您仍会停留在同一部分。也就是说 fullPage.js 有很好的支持（IE8+）并且会定期更新。

理想情况下，我希望 fullPage.js具有 1:1 的触摸移动，作者对拉取请求持开放态度，但现在我对 javascript 的了解太基础了，无法实现这样的东西。

我目前正在考虑的一个选项是结合使用两个滑块。我将使用RoyalSlider进行左右滑动（这样您就可以获得很好的 1:1 触摸）和 fullPage.js 用于垂直上下效果。

于 2014-03-05T12:50:07.680 回答