Question

我创建了一个画廊（使用ZenPhoto），我将一个专辑中的所有图像加载到一个页面中。每个图像都有一个命名锚：

<a href="image4_full.jpg" title="image4" name="image4">
  <img src="image4.jpg" alt="image4" />
</a>

--- ---编辑注意：锚没有按顺序命名，名称可以是任何名称，例如“胡萝卜”，“贵宾犬”，“炭疽病”，“you_always_complicate_things”。

我想让用户使用左/右箭头键跳转到下一个/上一个命名锚点。如果必须的话，我将使用jQuery，但如果这很容易，我宁愿选择更短的解决方案。请帮助：）

Answer 1

使用Keydown Event：

var num = 1;
var imagecount = 4;
document.body.addEventListener('keydown', function (e) {
  var keyCode = e.keyCode;
  if(keyCode==37) { //left
    if(num > 1) num -= 1; 
    location.hash = "#image" + num;
  }
  else if(keyCode==39) { //right
    if(num <= imagecount) num += 1; 
    location.hash = "#image" + num;
  }
});

编辑：使用不同的名称

var num = 0;
var images = new array();
images[0] = "image1";
images[1] = "imageZ";
images[2] = "theend";
var imagecount = images.length - 1;
document.body.addEventListener('keydown', function (e) {
  var keyCode = e.keyCode;
  if(keyCode==37) { //left
    if(num > 0) num -= 1; 
    location.hash = "#" + images[num];
  }
  else if(keyCode==39) { //right
    if(num < imagecount) num += 1; 
    location.hash = "#" + images[num];
  }
});

您可以使用php生成图像数组（如果需要代码，则进行响应）。好方法＆＃39;会是 - 据我所知 - 有一个带有图像名称的json文件并从你的站点获取它，但是在没有jQuery的情况下实现它是一个跨浏览器的冒险。

使用向左/向右箭头键跳转到下一个/上一个命名锚点

1 个答案: