2012-09-29 112 views
0

我一直只使用JavaScript和一般的编程工作大约一个月,并遇到了一个我无法找到解决方案的问题。所以我就在这里。 我创建了一个画廊,您可以点击小图片将它们放大到一个新的“窗口”(它只是放置在页面其余部分的顶部),以便更好地查看图片。按箭头键更改图片

这里是棘手的部分。我想在按下箭头键时能够更改图像。 例如,如果我按下键盘上的右箭头键我想老照片打开隐藏的行中的第二图像淡入

这里就是当你按下方向键的代码:

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"]; 
+2

当看不到标记和所有变量时,有点难以回答。我想你应该在[jsfiddle](http://jsfiddle.net)中设置一个小例子... – adeneo

+0

或者至少将HTML和CSS添加到问题中。 – j08691

回答

1

代码似乎是正确的我,请交叉检查渡过函数被调用的按键和变量都在里面访问使用警报方法调试。

+0

我相信就是这样。 +1正确击中它! – adeneo

+0

这里是[jsfiddle.net小链接](http://jsfiddle.net/WeD75/8/)为你有一个工作[演示](http://jsfiddle.net/WeD75/8/) –

+0

只是首先点击右下方的窗口(预览窗口),然后尝试向右和向左箭头更改图像。 –