我的页面上有一个全屏旋转滑块。我需要让幻灯片在滚轮上前进。我下面的代码使用滚动事件(而不是鼠标滚轮)来推进幻灯片,但有一个固有的问题。如果你真的旋转鼠标滚轮,它会同时滚动整个卡座,你真的无法控制你最终的位置。一旦检测到一个滚轮的使用,我希望删除听众,然后在幻灯片改变后再添加它......就像那样......我只是猜测...或者它可能以某种方式约束单击滚动事件?
我现在在文档就绪代码块中的内容:
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
revapi17.revnext();;
}
else
{
revapi17.revprev();;
}
_top = _cur_top;
console.log(_direction);
});
参考革命滑块API:http://clapat.ro/themes/creative/doc/rev-documentation.html#!/publicapi
dev网址:http://devonline.wpengine.com/story-2/
更新:谢谢大家。我找到了解决方案:
//如果页面上没有滑块,则退回 if(typeof revapi17 ==='undefined')return;
//幻灯片更改时添加轮监听器 revapi17.on('revolution.slide.onchange',onChange);
函数onChange(){
// remove wheel listener before adding it to ensure event only fires once
revapi17.off('DOMMouseScroll mousewheel').on('DOMMouseScroll mousewheel', onWheel);
}
函数onWheel(event){
// remove wheel listener as soon as wheel movement is detected
revapi17.off('DOMMouseScroll mousewheel');
event = event.originalEvent;
if(event.wheelDelta > 0 || event.detail < 0) {
revapi17.revprev();
}
else {
revapi17.revnext();
}
}