将分页控件添加到整页触摸滑动器/滑块-Hammer.js

Question

点击寻找

以下是我使用Hammer.js创建的全功能的全页面触摸滑块

您可以drag ， swipe或pan来浏览页面。

滑块可以按预期工作，但是我现在尝试通过添加两个按钮来创建后备导航，以便单击时也可以进行向左和向右分页。

---

题

单击时如何调用锤子向左或向右滑动？ （JavaScript或jQuery）。

当前尝试

$('#Left').on('click', function() {
  HammerCarousel(document.querySelector('.Swiper'), 'Left');
});

---

完整代码

 function swipe() { var reqAnimationFrame = (function () { return window[Hammer.prefixed(window, "requestAnimationFrame")] || function (callback) { setTimeout(callback, 1000 / 60); } })(); function dirProp(direction, hProp, vProp) { return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp } function HammerCarousel(container, direction) { this.container = container; this.direction = direction; this.panes = Array.prototype.slice.call(this.container.children, 0); this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')]; this.currentIndex = 0; this.hammer = new Hammer.Manager(this.container); this.hammer.add(new Hammer.Pan({ direction: this.direction, threshold: 10 })); this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this.onPan, this)); this.show(this.currentIndex); } HammerCarousel.prototype = { show: function (showIndex, percent, animate) { showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1)); percent = percent || 0; var className = this.container.className; if (animate) { if (className.indexOf('animate') === -1) { this.container.className += ' animate'; } } else { if (className.indexOf('animate') !== -1) { this.container.className = className.replace('animate', '').trim(); } } var paneIndex, pos, translate; for (paneIndex = 0; paneIndex < this.panes.length; paneIndex++) { pos = (this.containerSize / 100) * (((paneIndex - showIndex) * 100) + percent); translate = 'translate3d(' + pos + 'px, 0, 0)'; this.panes[paneIndex].style.transform = translate; this.panes[paneIndex].style.mozTransform = translate; this.panes[paneIndex].style.webkitTransform = translate; } this.currentIndex = showIndex; }, onPan: function (ev) { var delta = dirProp(this.direction, ev.deltaX, ev.deltaY), percent = (100 / this.containerSize) * delta, animate = false; if (ev.type == 'panend' || ev.type == 'pancancel') { if (Math.abs(percent) > 20 && ev.type == 'panend') { this.currentIndex += (percent < 0) ? 1 : -1; } percent = 0; animate = true; } this.show(this.currentIndex, percent, animate); } }; var outer = new HammerCarousel(document.querySelector('.Swiper'), Hammer.DIRECTION_HORIZONTAL); }; $(swipe); 

 html, body, .Page, .Swiper{ position:relative; height:100%; } .Swiper{ background:#666; overflow:hidden; } .Swiper.animate > .Page{ transition:all .3s; -webkit-transition:all .3s; } .Page{ position:absolute; top:0; left:0; height:100%; width:100%; padding:0 10px; font:42px Arial; color:#fff; padding-top:10%; text-align:center; } .Page:nth-child(odd) { background:#b00; } .Page:nth-child(even) { background:#58c; } #Left, #Right{ position:absolute; top:0; height:50px; width:50px; background:#fff; text-align:center; font:16px/3em Arial; cursor:pointer; } #Left{ left:0; } #Right{ right:0; } 

 <script src="http://hammerjs.github.io/dist/hammer.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Swiper"> <div class="Page">PAGE 1<br/>DRAG LEFT</div> <div class="Page">PAGE 2<br/>SWIPE ME</div> <div class="Page">PAGE 3<br/>HOLD TO PAN</div> <div class="Page">PAGE 4<br/>FLICK TO GO BACK</div> </div> <div id="Left">Left</div> <div id="Right">Right</div> 

Answer 1

我为此设计了一个jQuery解决方案，该解决方案应该可以满足您正在寻找的后备问题。

不过，有些事情要考虑。 同样在您的示例中，不考虑页面调整大小。 为了保持一致性并解决当前问题，我没有这样做，但是您会注意到我正在抓紧$('.Page').width(); 作为此解决方案中的变量。 如果您确实需要调整大小，建议您重新分配该值。 同样，轻扫/单击的混合将使此无效。 我假设由于您表示这将是一个备用，因此用户将获得两种体验之一。 如果没有，我们还需要一种在滑动事件上更新tracker的方法。

您会注意到var tracker = { 'R': 0 } 。 虽然命名可能不是最好的方法，但'R'将说明用户以加/减1方式执行了多少次正确的“滑动”（导航单击）

<div id="Left" direction="L">Left</div>
<div id="Right" direction="R">Right</div> 

---

$(function() {
    var width = $('.Page').width();
    var pages = $('.Page').length;
    var tracker = { 'R': 0 }

    $('#Right, #Left').click(function() {

        $(this).attr('direction') === 'R' ? 
            ((tracker.R < (pages - 1) ? tracker.R += 1 : pages)) : 
            (tracker.R > 0) ? (tracker.R -= 1) : 0;

        $('.Swiper').animate({ 'scrollLeft': $('.Page').width() * tracker.R  }, 250)
    });
});

JSFiddle链接