0

我需要键盘事件来查看下一个和上一个更大的图像。请帮帮我。当我点击鼠标时，我正在查看图像，像这样，如果我也点击左右箭头键，我必须查看图像。

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');


    });



});
4

1 回答 1

3

这应该适合您的需要，只需将其插入，或者如果您需要在其他地方使用左右箭头键，请使用$('#gallery')而不是$(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
  }
});

编辑：如果您需要任何其他 keyCodes，请使用此网站： http: //www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

于 2012-07-16T10:37:16.777 回答