1

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

这里需要注意的是,使用滚轮时页面实际上并没有滑动,它只会激活下一个幻灯片动画。传统意义上的网页实际上从来没有scolls...

但是有些人不使用滚轮,他们使用键盘箭头。

有没有办法,最好使用 JavaScript,强制箭头键模拟鼠标滚轮的单个滚动?

对于缺少代码或之前的努力,我深表歉意 - 我无法找到与此问题相关的任何内容,并且代码已很好地嵌入到幻灯片扩展中。我希望添加我自己的 JS 来补充基础幻灯片。

4

3 回答 3

2

您可以尝试使用以下代码通过代码触发画廊元素上的鼠标滚轮事件:

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

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

于 2017-07-25T12:47:44.193 回答
0

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

$('#someContainer').scroll(function(){
       $( "#target" ).keydown();
    })
于 2017-07-25T12:36:56.897 回答
0

你可以这样做:

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
    }
});
于 2017-07-25T12:44:37.957 回答