Javascript 如何将键盘绑定添加到转盘功能jQuery

您可以看到实现

我希望能够使用键盘上的左箭头和右箭头循环浏览图像。如何使用jQuery或CSS实现这一点

HTML如下所示：

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

必要的条件是：

var oImg, sliderCode, sliderViewPort, win_width;
    var oImg_height, oImg_width, oImg_ratio, tImg_width, tImg_height, sliderCode_w, sliderCode_h, ul_width;
    var rImg_width, rImg_height, view_new_w, view_new_h, li_w, rUl_width;

    function setUp(numImages) {
        oImg_height = oImg.height(); //size of original image height 
        oImg_width = oImg.width(); //size of original image width 
        oImg_ratio = oImg_height / oImg_width; //aspect ratio of original image 
        tImg_width = (win_width * 0.915) / num_of_images; // Target image width = (90% of the window) / 2 
        tImg_height = tImg_width * oImg_ratio; // Target image height, resized according to the original image ratio. 
        sliderCode_w = $('#slider-code').width();
        sliderCode_h = $('#slider-code').height();
        var ul_width = $('#slider-code .viewport ul').width();

        //  console.log("Original Image Height: ", oImg_height, " Original Image Width: ", oImg_width, " Original Image Aspect Ratio: ", oImg_ratio, " Slider Code Width: ", sliderCode_w, " Slider Code Height: ", sliderCode_h, " Window Width: ", win_width, " UL Width: ", ul_width, " Target Image Width: ", tImg_width, " Target Image Height: ", tImg_height); 

        sliderCode = $('#slider-code .viewport .overview img:lt(26)').css({ 'width': tImg_width, 'height': tImg_height });   //resizes the images

        rImg_width = sliderCode.width(); // size of resized image width  
        rImg_height = sliderCode.height(); // size of resized image width 

        $('#slider-code .next').css({ 'top': rImg_height / 2 }); //This needs to be resolved for various size windows 
        $('#slider-code .prev').css({ 'top': rImg_height / 2 });
        $('#slider-code').css({ 'width': '100%', 'height': rImg_height + 10 }); //to accomodate borders, extra padding was added to heights. To make it truly dynamic, a variable (as a percentage) of the width of the window, could be used to be added to the height 
        $('#slider-code .viewport').css({ 'width': win_width * 0.94, 'height': rImg_height + 10 });
        $('#slider-code .overview li').css({ 'width': rImg_width + 10 }); 
        $('#edit-image-nav img').css({ 'width' : '42px', 'height' : '30px', 'display' : 'block' });  //This was done because without it, something else is resizing the images to a large size. I was not able to trace it, but in a re-factor, I should trace what is resizing it and remove that, then remove this.
        //$('#slider-code .overview li img:not("#edit-image-nav")').css({ 'width': rImg_width + 10 }); 
        view_new_w = sliderViewPort.width();
        view_new_h = sliderViewPort.height();
        li_w = $('#slider-code .overview li').width();
        rUl_width = $('#slider-code .viewport ul').width();

        //  console.log("Viewport New Width: ", view_new_w, view_new_h, " List Item Width: ", li_w, " Resized Image Width: ", rImg_width, " Resized Image Height: ", rImg_height, " Resized UL Width: ", rUl_width); 

        $('#slider-code').tinycarousel({ controls: true, animation: true, display: 1 });

    }

$(window).load(function() {

 //Cache Some Common Elements
        oImg = $('#slider-code .viewport .overview img:eq(1)');
        sliderViewPort = $('#slider-code .viewport');

        // --------------------------- Begin Comparison Code --------------------------------------------------------        
        win_width = $(window).width();
        num_of_images = 2; //The number of images expected in view (2 for 2-up, 3 for 3-up, etc.) The default value is 2. 

        $("#viewbar img").click(function(e) {
            num_of_images = parseInt($(this).attr("data-id"), 10); // This accepts the integer associated with the navbar.           
            $('#viewname').text(num_of_images + '-up');

            setUp(num_of_images);

            e.preventDefault();
        });

        //Default set up
        setUp(num_of_images);

        // --------------- End Comparison Code -------------------------------------------------------------------------- 

})

---

如果您还需要什么，请告诉我。

有3个jQuery键盘选项，具体取决于您需要什么。你可以这样做

$('.viewport').keydown(function(e){
    if (e.keyCode == 37){ //left arrow clicked
        //do something
    } else if (e.keyCode == 39){//right arrow clicked
        //do something else
    }
});

您可以将$（文档）替换为$（'.viewport'），但必须处于焦点位置，然后按键

$('.viewport').keydown(function(e){
    if (e.keyCode == 37){ //left arrow clicked
        //do something
    } else if (e.keyCode == 39){//right arrow clicked
        //do something else
    }
});

$(document).keydown( function(eventObject) {
     if(eventObject.which==37) {//left arrow
        $('#slider-code .prev').click();//emulates click on prev button 
     } else if(eventObject.which==39) {//right arrow
        $('#slider-code .next').click();//emulates click on next button
     }
} );