请查看steven.tlvweb.com
我想实现它,以便左右键盘箭头控制流程。
当前,滚轮可以正常工作并在构造函数中进行如下设置:
/* ImageFlow Constructor */
/* add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
if (e.preventDefault) e.preventDefault();
this.parent.scroll(-e.detail);
return false;
}, false);
this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
return false;
}
在imageflow.prototype中,代码如下:
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
因此,我为构造函数编写了一些代码:
this.oc.onkeydown=function(){
this.parent.keypress(event.keyCode);
return false;
}
在imageflow.prototype中,我包括:
/* ==== arrow keys ==== */
keypress : function(kp) {
switch (kp) {
case 39: //right Key
if (this.view < this.NF - 1) { //if not at far right of gallery
this.calc(1); //move gallery left
break;
}
case 37: //left Key
if (this.view > 0) { //if not at far left of gallery
this.calc(-1); //move gallery left
break;
}
}
},
注意:实际上,当前在imageflow构造函数中有代码,但是它不起作用(将它们全部删除甚至无效):
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
我认为我缺少相对基本的东西。
最佳答案
我在JSFiddle中为您创建了一个更简单的示例。
http://jsfiddle.net/nLaGz/
基本上,您似乎正在尝试将键盘事件附加到this.oc对象,该对象基本上表示您的<div id="imageFlow">
元素。
问题是<div>
元素不是输入元素,因此它们在键盘事件中的表现不佳,因为它们从未像窗体输入那样真正获得“焦点”。
幸运的是,window.document对象是附加键盘事件的好地方,因为无论dom元素具有什么焦点,它都将侦听。
尝试更改您的行:
this.oc.onkeydown
至
window.document.onkeydown
关于javascript - 如何使用Javascript onKeyDown来控制图库-左右箭头,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13828570/