如何将下一个/上一个按钮添加到 Surface 平板电脑触摸幻灯片？答案

【问题标题】：How to add next / previous buttons to Surface tablet touch-slideshow?如何将下一个/上一个按钮添加到 Surface 平板电脑触摸幻灯片？
【发布时间】：2014-03-18 14:52:11
【问题描述】：

使用此示例： http://samples.msdn.microsoft.com/iedevcenter/zoomandpan/scenario2.html

...我已经能够在 Surface 平板电脑上设置一个不错的滑动幻灯片。它基本上在 UL 上使用以下 css 样式，根本没有 Javascript：

overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
touch-action: pan-x;
-ms-touch-action: pan-x;
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-points-x: snapInterval(0%, 100%, 200%, 300%, 400%, 500%, 600%, 700%, 800%, 900%, 1000%);
-ms-scroll-chaining: none;
-ms-overflow-style: none;

但是，我的规范要求有下一个和上一个按钮。当我使用以下任一方法设置下一个按钮时，它们的失败方式大致相同。基本上，如果我不滑动，而只触摸下一个按钮，一切都很好——第二张幻灯片出现了。如果我再次触摸下一张，它会返回到第一张幻灯片。但是，如果我首先滑动到第二张幻灯片（效果很好），然后触摸下一个按钮，幻灯片将停留在第二张幻灯片上。如果我再次触摸下一个，它仍然停留在第二张幻灯片上。这些按钮似乎完全没用。或者，如果我从按钮开始，单击下一步，然后尝试滑动，它会滑动，但它只会向前滑动，而不是向后滑动，将幻灯片带到一个空白屏幕。

$li.animate(
{
    'left': '100%'
}, 500);

或者……

$li.css(
{
    'transform' : "translate3d(100%,0,0)",
    '-moz-transform' : "translate3d(100%,0,0)",
    '-webkit-transform' : "translate3d(100%,0,0)",
    '-o-transform' : "translate3d(100%,0,0)",
    '-ms-transform' : "translate3d(100%,0,0)"
});

显然，我的下一个按钮更改的 CSS 与我的滑动更改的内容不同。但由于滑动完全是 CSS，我认为它不会改变任何 CSS。所以我不知道我的 JS 需要改变什么才能正常使用滑动功能！

我需要使下一个和上一个按钮与滑动功能兼容。我尝试过反过来，通过使用使滑动与下一个和上一个按钮兼容指针，但是滑动功能变得超级跳跃并且看起来很糟糕。这个 CSS 滑动非常流畅和漂亮。所以我希望滑动成为标准，让 JS 使用它。

如何让 JS onclick 或 ontouch 做与滑动一样的事情？

我在这里真正希望的是一个完整滑块示例的链接，该示例具有清晰的文档并使用 Surface -ms-scroll-snap-points-x 样式进行滑动，并以某种方式附加下一个/上一个按钮，以便我可以在滑动和点击之间切换接下来，一切都按预期进行。

提前谢谢你！

【问题讨论】：

标签： javascript jquery css internet-explorer touch

【解决方案1】：

我在这里使用了这些概念： http://msdn.microsoft.com/en-us/library/ie/dn254949(v=vs.85).aspx

基本上是这样的：

function goToSlide(indx)
{
    var wdth = $lis.first().width();
    var newLoc = wdth*indx;
    $ul[0].msZoomTo(
    {
        contentX: newLoc,
        viewportX: 'left',
        contentY: 0,
        viewportY: 'top',
        scaleFactor: 1.0
    });
}

对此缺乏良好的文档感到相当惊讶。

【讨论】：