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需要改变什么才能正常使用滑动功能！

我需要让下一个和上一个按钮与滑动功能兼容。我已经尝试过相反的方式，使滑动兼容下一个和上一个按钮，通过使用指针，但滑动功能变得超级跳跃，看起来非常糟糕。这种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
    });
}

相当惊讶于缺乏关于此的良好文档。

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

1 个答案: