Question

我是JavaScript和jQuery的新手，所以这是我的问题。如何向此代码添加简单的按键操作。就像我按下右箭头一样，转到下一张图像。如果我按向左箭头，请转到上一张图像。我查了一下并亲自尝试了一些东西，但我无法将任何东西集成到这个特定的代码中。

现在，我可以简单地使用另一个代码并使用灯箱库或其他东西，但我不希望这样，因为我已经在网站的某个地方找到了它，我无法再重复一遍。

function showImage(smSrc, lgSrc) {
  document.getElementById('largeImg').src = smSrc;
  showLargeImagePanel();
  unselectAll();
  setTimeout(function() {
    document.getElementById('largeImg').src = lgSrc;
  }, 1)
}

function showLargeImagePanel() {
  document.getElementById('largeImgPanel').style.display = 'block';


}

function unselectAll() {

  if (document.selection)
    document.selection.empty();
  if (window.getSelection)
    window.getSelection().removeAllRanges();
}

#largeImgPanel {
  text-align: center;
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(100, 100, 100, 0.8);
}

<img src="./images/t_p0001.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0001.JPG');" />
<img src="./images/t_p0002.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0002.JPG');" />
<img src="./images/t_p0003.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0003.JPG');" />
<img src="./images/t_p0004.jpg" style="cursor:pointer" onclick="showImage(this.src, './images/p0004.JPG');" />
<div id="largeImgPanel" onclick="this.style.display='none'">
  <img id="largeImg" style="height:100%; margin:0; padding:0;" />
</div>

Answer 1

要使用JQuery检测按键，您可以将函数绑定到keydown事件：

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

（摘自there）

要更改显示的img，你可以做的就是这样：

$("#largeImgPanel").html('<img src="./images/t_p0001.jpg"  style="cursor:pointer"');

然后，您必须实施一个系统来了解正在显示的图像，并使用此信息来确定要显示的下一个图像。

编辑：根据要求，让它通过图像：

var imgs = ["./images/t_p0001.jpg", "./images/...", etc];

var currentImg = 0;

然后在keydown事件处理程序中，你有：

case 37: // left
if (currentImg === 0) {
    currentImg = imgs.length - 1;
}
else {
    currentImg--;
}
break;
case 39: // right
if (currentImg === imgs.length - 1) {
    currentImg = 0;
}
else {
    currentImg++;
}
break;

然后您只需更新src标记的img属性（切换后）：

if (e.which === 37 || e.which === 39) {
    $("#largeImgPanel>img").attr("src", imgs[currentImg]);
}

如何对此代码进行按键操作？

1 个答案: