Question

我正在设置可以用箭头点击的图像。目前我通过循环和数组显示所有图像。我已经能够进行设置，以便当您将鼠标悬停在 smallimage 预览上时，主图像将更改为该图像。 Aka你可以在它们上面悬停看看更大的版本。

我试图用照片一侧的箭头做同样的事情，但是我的确很短。如何更改我的代码以允许用箭头更改图像？

感谢您的帮助！

//显示图像

             <% 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事件。只是一个快速演示：

＆＃13;

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

＆＃13;

.small {
  border: solid 2px transparent;
}

.selectedImage {
  border: solid 2px blue;
}

＆＃13;

<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>

＆＃13;

单击箭头更改图像

1 个答案: