0

似乎很容易解决，但我似乎无法理解。我需要在 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 上看到的问题一样，它会根据鼠标滚动跳过幻灯片。

无论如何，我可以编辑此代码以使其跳过一张幻灯片并仅转到下一张吗？

我很感激帮助。

4

1 回答 1

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

从这里引用简单的油门功能

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

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

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

 })()
于 2016-01-27T09:05:42.973 回答