我有一些代码可以让您在灯箱中的全尺寸图像之间来回滚动。它只是在按下键时替换图像的来源。它在Firefox中完美运行，但在IE，Chrome和Safari（我测试过的唯一其他浏览器）中似乎没有做任何事情。
非常感谢任何帮助！
$(document).ready(function() {
var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;
function handleArrowKeys(evt) {
switch (evt.keyCode) {
case 37:
$(function() {
if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
thisImage = 1;
} else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
thisImage = 2;
} else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
thisImage = 3;
} else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
thisImage = 4;
} else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
thisImage = 5;
} else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
thisImage = 6;
} else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
thisImage = 7;
} else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
thisImage = 8;
} else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
thisImage = 9;
} else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
thisImage = 10;
} else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
thisImage = 11;
} else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
thisImage = 12;
} else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
thisImage = 13;
}
});
$(function() {
if (thisImage == 1) {
thisImage = 1;
} else {
thisImage--;
}
});
$('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });
var theTitle = $('div#myImageFlow_caption').text();
$('div.highslide-caption').html(theTitle);
break;
case 39:
$(function() {
if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
thisImage = 1;
} else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
thisImage = 2;
} else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
thisImage = 3;
} else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
thisImage = 4;
} else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
thisImage = 5;
} else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
thisImage = 6;
} else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
thisImage = 7;
} else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
thisImage = 8;
} else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
thisImage = 9;
} else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
thisImage = 10;
} else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
thisImage = 11;
} else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
thisImage = 12;
} else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
thisImage = 13;
}
});
$(function() {
if (thisImage == maxImage) {
// Do Nothing....
} else {
thisImage++;
}
});
$('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });
var theTitle = $('div#myImageFlow_caption').text();
$('div.highslide-caption').html(theTitle);
break;
}
}
document.onkeypress = handleArrowKeys;
});
答案 0 :(得分：6)
它与浏览器之间使用的不同事件模型有关。
这一行：
document.onkeypress = handleArrowKeys;
并且keyCode属性不是跨浏览器兼容的。
由于您似乎正在使用jQuery，为什么不这样使用他们的keypress event：
$(document).ready(function() {
var thisImage = 1;
var maxImage = $('div#myImageFlow_images > img').length;
$("body").keypress(function(evt) {
switch (evt.which) {
case 37:
$(function() {
if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
thisImage = 1;
} else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
thisImage = 2;
} else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
thisImage = 3;
} else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
thisImage = 4;
} else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
thisImage = 5;
} else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
thisImage = 6;
} else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
thisImage = 7;
} else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
thisImage = 8;
} else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
thisImage = 9;
} else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
thisImage = 10;
} else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
thisImage = 11;
} else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
thisImage = 12;
} else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
thisImage = 13;
}
});
$(function() {
if (thisImage == 1) {
thisImage = 1;
} else {
thisImage--;
}
});
$('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });
var theTitle = $('div#myImageFlow_caption').text();
$('div.highslide-caption').html(theTitle);
break;
case 39:
$(function() {
if ($('img.highslide-image').attr('src') == 'images/1.jpg') {
thisImage = 1;
} else if ($('img.highslide-image').attr('src') == 'images/2.jpg') {
thisImage = 2;
} else if ($('img.highslide-image').attr('src') == 'images/3.jpg') {
thisImage = 3;
} else if ($('img.highslide-image').attr('src') == 'images/4.jpg') {
thisImage = 4;
} else if ($('img.highslide-image').attr('src') == 'images/5.jpg') {
thisImage = 5;
} else if ($('img.highslide-image').attr('src') == 'images/6.jpg') {
thisImage = 6;
} else if ($('img.highslide-image').attr('src') == 'images/7.jpg') {
thisImage = 7;
} else if ($('img.highslide-image').attr('src') == 'images/8.jpg') {
thisImage = 8;
} else if ($('img.highslide-image').attr('src') == 'images/9.jpg') {
thisImage = 9;
} else if ($('img.highslide-image').attr('src') == 'images/10.jpg') {
thisImage = 10;
} else if ($('img.highslide-image').attr('src') == 'images/11.jpg') {
thisImage = 11;
} else if ($('img.highslide-image').attr('src') == 'images/12.jpg') {
thisImage = 12;
} else if ($('img.highslide-image').attr('src') == 'images/13.jpg') {
thisImage = 13;
}
});
$(function() {
if (thisImage == maxImage) {
// Do Nothing....
} else {
thisImage++;
}
});
$('img.highslide-image').attr({ src: 'images/' + thisImage + '.jpg' });
var theTitle = $('div#myImageFlow_caption').text();
$('div.highslide-caption').html(theTitle);
break;
}
}
});
});
答案 1 :(得分：3)
你可以用正则表达式替换你的if else块，它会缩短你的代码并简化你的代码
var re = new RegExp('images/([0-9]+).jpg');
var m = re.exec($('img.highslide-image').attr('src'));
if (m && m.length > 0) {
thisImage = m[0];
}