单击箭头更改图像

Question

我正在设置可以用箭头单击的图像。目前我所有的图像都通过一个循环和一个数组显示出来。我已经能够设置它，以便当您将鼠标悬停在 smallimage 预览上时，主图像将变为该图像。也可以将鼠标悬停在它们上以查看更大的版本。

我正在尝试对照片侧面的箭头做同样的事情，但我做不到。我将如何更改我的代码以允许使用箭头更改图像？

感谢您的帮助！

//显示图片

             <% var imgsrc = awspath + listings.currentimages[0] %>
            <img  id='mainPicture' class="image-resposive" src=<%=imgsrc%>>

                <div id='allimages'>
                 <% for(var i = 0; i < listings.currentimages.length; i++ ) { %>
                  <div class='smallerImages'>
                     <% var imgsrc = awspath + listings.currentimages[i] %>
                  <img class="small" src="<%= imgsrc %>">

                </div>
                <% } %>
                </div> 

//设置悬停变大...

  $('.small').hover(function() {
   $('.small').removeClass('selectedImage')
   var src = $(this).attr('src');
   $(this).addClass('selectedImage')
   $('#mainPicture').attr('src', src);
   });

Answer 1

在文档元素上使用 jQuery keydown 事件。只是一个快速演示：

function selectImage(img) {
  $(".small").removeClass("selectedImage");
  var src = $(img).attr("src");
  $(img).addClass("selectedImage");
  $("#mainPicture").attr("src", src);
}

$(".small").hover(function() {
  selectImage(this);
});
   
$(document).keydown(function(e) {
    switch(e.which) {
        // left
        case 37: 
          var prev = $(".selectedImage").prev(".small");
          if(!prev.length) {
          	prev = $("#allimages").find(".small:last-child");
          }
          selectImage(prev);
        break;
        // right
        case 39: 
          var next = $(".selectedImage").next(".small");
          if(!next.length) {
          	next = $("#allimages").find(".small:first-child");
          }
          selectImage(next);
        break;
        default: return;
    }
    // Prevent the default action (scroll / move caret)
    e.preventDefault(); 
});

.small {
  border: solid 2px transparent;
}

.selectedImage {
  border: solid 2px blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="mainPicture">
<br>
<div id="allimages">
  <img class="small" src="https://dummyimage.com/100x100/000/fff">
  <img class="small" src="https://dummyimage.com/100x100/f00/fff">
  <img class="small" src="https://dummyimage.com/100x100/f0f/fff">
</div>