限制我的页面滚动，使其只跳过一张幻灯片

Question

似乎很容易修复，但我似乎无法理解。我需要在 JavaScript 中限制或消除我的滚动，以便幻灯片只跳到下一张幻灯片。目前它正在计算滚动点击的次数然后滚动那么多幻灯片。我在 WordPress 网站上使用革命滑块。

我有当前代码可以在鼠标滚动时使用幻灯片跳到下一张幻灯片。

(function() {
 
 // change "revapi1" here to whatever API name your slider uses (see notes below)
 var slider = revapi1;
 
 slider.parent().on('mousewheel DOMMouseScroll', function(event) {
  
  if(event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
  
   slider.revprev();
   
  }
  else {
  
   slider.revnext();
            
   
  }
  
 });
 
})()

但是正如您在 www.bladeworks.co.za/blade_website_new 上看到的问题，它会根据完成的鼠标滚动跳过幻灯片。

我是否可以编辑这段代码，让它跳过一张幻灯片，只转到下一张？

感谢您的帮助。

Answer 1

   function throttle(fn, threshhold, scope) {
        threshhold || (threshhold = 250);
        var last,
        deferTimer;
    return function () {
        var context = scope || this;

        var now = +new Date,
        args = arguments;
        if (last && now < last + threshhold) {
        // hold on to it
             clearTimeout(deferTimer);
             deferTimer = setTimeout(function () {
             last = now;
             fn.apply(context, args);
        }, threshhold);
        } else {
             last = now;
             fn.apply(context, args);
        }
    };
 }

从这里引用 simple throttle function

  element.on('mousewheel DOMMouseScroll',throttle(function(){
      ...
  }))

或者您可以使用 "lock" 在滑块移动时锁定您的事件处理程序：

  element.on('mousewheel DOMMouseScroll',function(){
      if(!element.hasClass('locked')){
          element.addClass('locked');
          ...//process, move next, move previous
          element.removeClass('locked');
      }
  })

这个很容易理解

一个完整的：

 (function() {


       var slider = revapi1;

       slider.parent().on('mousewheel DOMMouseScroll',throttle(function(event) {
             if(event.originalEvent.wheelDelta > 0 ||     event.originalEvent.detail < 0) {
                slider.revprev();
             }else {
                slider.revnext();
             }
      },250));
    function throttle(fn, threshhold, scope) {
         threshhold || (threshhold = 250);
         var last,
         deferTimer;
         return function () {
             var context = scope || this;

             var now = +new Date,
             args = arguments;
             if (last && now < last + threshhold) {
                  // hold on to it
                  clearTimeout(deferTimer);
                  deferTimer = setTimeout(function () {
                       last = now;
                       fn.apply(context, args);
                  }, threshhold);
              } else {
                  last = now;
                  fn.apply(context, args);
              }
        };
     }

 })()

限制我的页面滚动，使其只跳过一张幻灯片

Throttle my page scroll so it only skips one slide

javascript

wordpress

scroll

revolution-slider