Javascript 将箭头键映射到滚轮功能?

Javascript 将箭头键映射到滚轮功能?,javascript,jquery,html,accessibility,scrollwheel,Javascript,Jquery,Html,Accessibility,Scrollwheel,我正在客户端网站上运行幻灯片放映。幻灯片放映为每张幻灯片制作动画,并且仅依赖鼠标滚轮,尽管在触摸屏设备中也会“滑动” 这里需要注意的是,当使用滚轮时,页面实际上不会发生翻滚,它只会激活下一个幻灯片动画。这个网页从来没有像传统意义上的那样冷嘲热讽 然而,有些人不使用滚轮,他们使用键盘箭头 是否有一种方法,理想情况下使用JavaScript,强制箭头键模拟鼠标滚轮的单个滚动 我为缺乏代码或之前的努力道歉-我还没有找到任何关于这个问题的东西,并且代码已经很好地嵌入到幻灯片扩展中。我希望添加我自己的JS

我正在客户端网站上运行幻灯片放映。幻灯片放映为每张幻灯片制作动画,并且仅依赖鼠标滚轮,尽管在触摸屏设备中也会“滑动”

这里需要注意的是,当使用滚轮时,页面实际上不会发生翻滚,它只会激活下一个幻灯片动画。这个网页从来没有像传统意义上的那样冷嘲热讽

然而,有些人不使用滚轮,他们使用键盘箭头

是否有一种方法,理想情况下使用JavaScript,强制箭头键模拟鼠标滚轮的单个滚动


我为缺乏代码或之前的努力道歉-我还没有找到任何关于这个问题的东西,并且代码已经很好地嵌入到幻灯片扩展中。我希望添加我自己的JS来补充基本的幻灯片放映。

你可以试试这样的东西。这不是一个实际的解决方案,而是一种方法

$('#someContainer').scroll(function(){
       $( "#target" ).keydown();
    })

你可以这样做:

yourElement.addEventListener('onkeydown', function(e) {
    var key = e.which || e.keyCode;
    if (key === 37) { // arrow left
        // Your code here
    } else if (key === 39) { // arrow right
        // Your code here
    }
});
var element = <reference to the element the mousewheel events are bound to>

document.addEventListener('keydown', function(e){
    var event = new Event('MouseEvents');
    event.initEvent('mousewheel', true, true);

    switch(e.keyCode){
        case '37':
            event.wheelDelta = -1;
            element.dispatchEvent(event);
            break;
        case '39':
            event.wheelDelta = 1;
            element.dispatchEvent(event);
            break;
    }
});

您可以尝试使用如下代码在gallery元素上触发鼠标滚轮事件:

yourElement.addEventListener('onkeydown', function(e) {
    var key = e.which || e.keyCode;
    if (key === 37) { // arrow left
        // Your code here
    } else if (key === 39) { // arrow right
        // Your code here
    }
});
var element = <reference to the element the mousewheel events are bound to>

document.addEventListener('keydown', function(e){
    var event = new Event('MouseEvents');
    event.initEvent('mousewheel', true, true);

    switch(e.keyCode){
        case '37':
            event.wheelDelta = -1;
            element.dispatchEvent(event);
            break;
        case '39':
            event.wheelDelta = 1;
            element.dispatchEvent(event);
            break;
    }
});
var元素=
文档.添加的事件列表器('keydown',函数(e){
var事件=新事件(“MouseEvents”);
initEvent('mouseweel',true,true);
开关(如钥匙代码){
案件'37':
event.wheelDelta=-1;
元素。dispatchEvent(事件);
打破
案件'39':
event.wheeldta=1;
元素。dispatchEvent(事件);
打破
}
});

向箭头键添加监听器怎么样?您可以修改幻灯片的代码吗?或者您是否使用了一个要与之干净接口的库?我更愿意在顶部添加我自己的库,因为我确信我的客户端会在某个时候更新滑块,并丢失我编写的任何其他代码。也就是说,我并不反对这个想法。您可以为按键添加一个事件侦听器,并使用
element.dispatchEvent()