Javascript 查看下一个和上一个较大图像的键盘事件
我需要键盘事件来查看下一个和上一个更大的图像。请帮帮我。当我点击鼠标查看图像时,就像这样,如果点击左右箭头键,我也必须查看图像 HTMLJavascript 查看下一个和上一个较大图像的键盘事件,javascript,jquery,html,Javascript,Jquery,Html,我需要键盘事件来查看下一个和上一个更大的图像。请帮帮我。当我点击鼠标查看图像时,就像这样,如果点击左右箭头键,我也必须查看图像 HTML <div id="gallery"> <div id="overlay"></div> <div class="slidePanel"> <div id="panel"> <img id="largeImage" src="" />
<div id="gallery">
<div id="overlay"></div>
<div class="slidePanel">
<div id="panel">
<img id="largeImage" src="" />
</div>
<div class="slideBtn">
<a href="#" id="next">
<img src="images/left_arrow.png" /></a>
<a href="#" id="prev"><img src="images/right_arrow.png" /></a>
</div>
<div id="close"><a href="#">Close</a></div>
</div>
<div id="thumbs" align="center">
<img src="images/image_01_thumb.jpg" alt="1st image description" />
<img src="images/image_02_thumb.jpg" alt="2nd image description" />
<img src="images/image_03_thumb.jpg" alt="3rd image description" />
<img src="images/image_04_thumb.jpg" alt="4th image description" />
</div>
</div>
这应该适合您的需要,只需将其插入,或者如果您需要在其他位置使用左右箭头键,请使用
$(“#gallery”)
而不是$(文档)
编辑:如果您需要任何其他键码,请使用此网站:这应该适合您的需要,只需将其插入,或者如果您需要在其他地方使用左右箭头键,请使用
$(“#gallery”)
而不是$(文档)
编辑:如果您需要任何其他关键代码,请使用此网站:嗨,克里斯托弗·肯尼,它不起作用。请告诉我在我的脚本中准确地插入代码的位置。请在您调用
loadslide()
后插入(或在内部),并说我刚刚测试了您的代码(需要临时修改一下)你还有一个额外的结束括号“}”),它抛出了一个错误,否则它应该可以工作。只要你点击$(“#next”)
和$(“#prev”)
的事件,我就可以工作。但是它只能在谷歌Chrome上工作,不能在Mozilla Firefox上工作。嗨,Christopher Kenney,它不能工作。请告诉我在我的脚本中准确地插入代码的位置。请在调用loadslide()
之后(或在里面)插入它,我刚刚测试了你的代码(不得不临时修改一下)你还有一个额外的结束括号“}”),它抛出了一个错误,否则它应该可以工作。只要你点击$(“#next”)
和$(“#prev”)
的事件,我就可以工作。但它只能在谷歌浏览器上运行,不能在Mozilla Firefox上运行。
function loadSlide(nSlide)
{
$('#thumbs img.current').removeClass('current');
$(nSlide).addClass('current');
var src = $(nSlide).attr('src').replace('thumb', 'large');
$("#largeImage").fadeOut(function()
{
this.src = src;
$(this).fadeIn();
}).center();
$("#overlay").css({"opacity" : "0.7"})
.fadeIn("slow");
$('#close a, #close').fadeIn();
$('#prev, #next').css('display', 'block');
}
$('#next').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).next('img').length > 0)
var nSlide = $(cSlide).next('img');
else
var nSlide = $('#thumbs img:first');
loadSlide(nSlide);
});
$('#prev').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).prev('img').length > 0)
var nSlide = $(cSlide).prev('img');
else
var nSlide = $('#thumbs img:last');
loadSlide(nSlide);
});
$('#thumbs img').click(function(){
loadSlide(this);
});
$("#panel").click(function(){
$(this).fadeOut("slow");
$("#overlay").fadeOut("slow");
});
$('#close a').click(function(){
$(this).fadeOut('slow');
$('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
$("#thumbs").css('display', 'block');
});
$('#thumbs img').click(function(){
$("#thumbs").css('display', 'none');
});
});
$(document).keydown(function (e) {
if (event.keyCode == 37) {
$('#next').click(); //on left arrow, click next (since your next is on the left)
} else if (event.keyCode == 39) {
$('#prev').click(); //on right arrow, click prev
}
});