按箭头键更改图像 [英] Change image when pressing arrow keys

问题描述

我只使用JavaScript以及一般的程序设计工作了大约一个月，却遇到了一个我找不到解决方案的问题.所以我在这里. 我创建了一个图库，您可以在其中单击小图像以将其放大到新的窗口"中(只是将div放在页面其余部分的顶部)，以便更好地查看图片.

I've only been working with JavaScript, and programming in general, for about a month now and came across a problem which I just can't find a solution to. So here I am. I've created a gallery where you can click small images to zoom them up in a new "window" (it's just a div placed ontop of the rest of the page) for a better view of the picture.

这是棘手的部分.我希望能够在按箭头键时更改图像. 例如，如果我按键盘上的向右箭头键，我希望旧照片隐藏起来，而第二行图像淡入.

And here's the tricky part. I want to be able to change image when I press the arrow keys. For example, if I press the right arrow key on my keyboard I want the old picture to turn hidden and the second image in line to fade in.

这是按下箭头键时的代码:

Here's the code for when you press the arrow keys:

function onKeyPress(e)
{
    if (e.keyCode == 37) {
        lastImage.hide();
        indexNum--;
        $("#zoomImage img").attr('src', picSrc[indexNum]).fadeIn();
    }

    if (e.keyCode == 39) {
        lastImage.hide();
        indexNum++;
        $("#zoomImage img").attr('src', picSrc[indexNum]).fadeIn();
    }
}

这是变量的代码:

lastImage = $(#zoomImage img");  //The last picture shown)

var picSrc = ["img1.png", "img2.png", "img3.png"];

推荐答案

该代码对我来说似乎是正确的，请交叉检查天气，该函数在按键时被调用，并且该变量可通过使用警报方法进行调试而在内部访问.

the code seems to be correct to me, please cross check weather the function is called on key press and the variable are accessible inside by using alert method for debugging.

这篇关于按箭头键更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！