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

編集: 他のキーコードが必要な場合は、このサイトを使用してください: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

于 2012-07-16T10:37:16.777 に答える