Question

我正在将jQuery循环与mousewheel插件结合使用。我已经构建它，以便鼠标滚轮将根据轮子的移动方式在整个循环中移动。但是，一旦周期发生变化，我想阻止鼠标轮暂时在周期中移动一段时间，或者直到它在周期移动太快时向相反方向移动。

有没有办法阻止事件在每次触发后立即被触发？

我创建了一个JSBIN：

编辑：修正了鼠标滚轮的问题，现在它可以正常工作/下一步

-

编辑：在下面的r0m4n的帮助下，我设法找到了一个很好的解决方案。下面的答案是好的，但在调用滚动之前会产生一些延迟，所以我决定创建一个可以绑定和反弹的函数。

function wheelMove(event,deltaY) {
  event.preventDefault();
  $('#cycle').unbind('mousewheel', wheelMove);

  if (deltaY > 0) {
    $('#cycle').cycle('next');
  }
  if (deltaY < 0) {
    $('#cycle').cycle('prev');
  }
}

$(document).ready(function(){
  $('#cycle').cycle({
    fx: 'scrollVert',
    speed: 800,
    timeout: 0,
    after: function(){
      interval = setTimeout(function(){
        $('#cycle').bind('mousewheel', wheelMove);
      },1600);
    }
  });

  $('#cycle').bind('mousewheel',wheelMove);
});

Answer 1

对于鼠标滚轮的每次移动，您都可以设置超时，以延迟任何进一步的用户交互。

这可能需要进一步的时序调整才能完全完善，但试试这个js：

if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}

$(document).ready(function(){
    $('#cycle').cycle({
        fx: 'scrollVert'
    });

    var interval = "";
    $('#cycle').mousewheel(function(event, delta, deltaX, deltaY) {
        var o = '';
        clearTimeout(interval);
        if (deltaY > 0){                
            interval = setTimeout(function(){
                $('#cycle').cycle('next');
            },400);
        }
        else if (deltaY < 0){
            interval = setTimeout(function(){
                $('#cycle').cycle('prev');
            },400);
        }   
        //console.log(' pageY: ' + event.pageY );
    });  
});

Answer 2

此代码可能有所帮助。我正在使用一个屈光期（1秒）才能再次转动。（用#cycle ID替换#slider）

$('#slider').on("cycle-after",function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    // période réfractionnaire
    setTimeout(function(){ 
        $(outgoingSlideEl).removeClass('moving');
    },1000);
});

$('#slider').mousewheel(function(event, delta, deltaX, deltaY) {
    var slide = $('.cycle-slide-active');
    if($('.moving').size()==0 && slide.size()==1) {

        if(slide.css('left')=='0px' && slide.css('visibility')=='visible' && !slide.hasClass('moving')) {
            slide.addClass('moving');
            if (deltaY > 0){     
               $('#slider').cycle('next');
            }
            else if (deltaY < 0){
                $('#slider').cycle('prev');
            }   
        }
    }


});

jQuery循环 - 用鼠标滚轮控制？（如何防止鼠标滚轮连续循环？）

2 个答案:

jQuery循环 - 用鼠标滚轮控制？ （如何防止鼠标滚轮连续循环？）

2 个答案:

jQuery循环 - 用鼠标滚轮控制？（如何防止鼠标滚轮连续循环？）