键盘事件,用于查看下一个和上一个较大的图像 [英] Keyboard events for viewing the next and previous for a larger images
问题描述
我需要键盘事件来查看下一个和上一个较大的图像.请帮帮我.当我单击鼠标查看图像时,像这样,我也必须单击左右箭头键查看图像.
I need Keyboard events for viewing the next and previous for a larger images. Please help me out. As I am viewing the images if am clicking on the mouse, like this I have to view the images If am clicking on left and right arrow keys too.
HTML
<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>
JS
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');
});
});
推荐答案
这应该满足您的需要,只需将其插入其中,或者如果您需要在其他地方使用向左和向右箭头键,请使用$('#gallery')
而不是$(document)
This should suit your needs, just slot it in, or if you need to use the left and right arrow keys elsewhere use $('#gallery')
instead of $(document)
$(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
}
});
如果您需要任何其他keyCode,请使用以下网站: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
if you need any other keyCodes use this site: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
这篇关于键盘事件,用于查看下一个和上一个较大的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!