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

Question

使用这个示例: 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 需要更改什么才能正常使用滑动功能!

我需要使下一个和上一个按钮与滑动功能兼容。我尝试以相反的方式进行操作，通过使用使滑动与下一个和上一个按钮兼容的指针，但滑动功能变得 super 跳跃并且非常难看。这个 CSS 滑动非常流畅和漂亮。所以我希望滑动成为标准，而 JS 可以利用它。

如何让 JS onclick 或 ontouch 执行与滑动相同的操作？

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

提前致谢!

Answer 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
    });
}

对此缺乏良好的文档感到非常惊讶。