Question

请查看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; 
                    } 

        }
    },

NB实际上目前在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);
    }

我认为我错过了一些相对基础的东西。

Answer 1

我在JSFiddle中为你创建了一个更简单的例子。

http://jsfiddle.net/nLaGz/

基本上，您似乎正在尝试将键盘事件附加到this.oc对象，该对象基本上代表您的<div id="imageFlow">元素。

问题是，<div>元素不是输入元素，因此它们不能很好地处理键盘事件，因为它们从来没有像表单输入那样真正获得“焦点”。

幸运的是，window.document对象是附加键盘事件的好地方，因为无论dom元素有什么焦点，它都会监听。

尝试更改行：

this.oc.onkeydown

到

window.document.onkeydown

Answer 2

好的，谢谢Jason我到了某个地方！看一下steven.tlvweb.com，看看左右箭头键现在正在运行。

我刚刚遇到线路问题

this.parent.scroll（120）;

基本上在原型中设置滚动以取整数并向左或向右移动，具体取决于它是正还是负。我似乎没有正确地称它为正确。

this.parent.scroll（event.wheelDelta）;

是构造函数的正确编码，但在window.document.onkeydown = function（）中它不起作用。

function ImageFlow(oCont, xmlfile, horizon, size, zoom, border, start, interval) {

/* === handle mouse scroll wheel === */
this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
return false;
    }


/* ==== add keydown events ==== */  
    window.document.onkeydown=function(){
    switch (event.keyCode) {

    case 39:  //right Key
        alert('keyRight'); //move gallery right
        this.parent.scroll(120);

        break;

    case 37: //left Key

        alert('keyleft'); //move gallery left   
        this.parent.scroll(-120);
        break;

    }

    return false;
    }
}

ImageFlow.prototype = {

    scroll : function (sc) {

        alert('here');

        if (sc < 0) {
            if (this.view < this.NF - 1) this.calc(1);
        } else {
            if (this.view > 0) this.calc(-1);
        }
    },

}

如何使用Javascript onKeyDown来控制图库 - 左右箭头

2 个答案: