如何在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;

然而，我的规格要求有下一步和上一个按钮。当我使用以下任何一种方法设置next按钮时，它们都以相同的方式失败。基本上，如果我不滑动，而只是触摸下一个按钮，一切都很好——第二张幻灯片会自动出现。如果我再点击next，它就会回到第一张幻灯片。但是，如果我先滑动到第二张幻灯片(效果很好)，然后点击下一个按钮，幻灯片就会停留在第二张幻灯片上。如果我再次点击next，它仍然停留在幻灯片2。这些按钮似乎完全没用。或者，如果我从按钮开始，单击"下一步"一次，然后尝试滑动，它确实会滑动，但它只向前滑动，而不是向后滑动，使幻灯片显示到一个空屏幕。

$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样式滑动，并以某种方式附加下一个/上一个按钮，以便我可以在滑动和点击下一步之间交替，一切都如预期的那样工作。

提前感谢!

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

我很惊讶这方面没有好的文档