来自数组的 JavaScript 缩略图

Question

我正在尝试在一个网站上工作，该网站目前在 java 脚本的帮助下显示图片。我目前设置此网站的方式是在编号的照片链接上方显示图像。我不想在图片下方列出数字，而是希望数字是图片的缩略图。是否可以用图像替换它们？任何帮助表示赞赏。

这是我目前所拥有的:

var photos = new Array();
var photoindex = 0;

photos[0] = "images/piano.jpg";
photos[1] = "images/guitar.jpg";
photos[2] = "images/studio.jpg";
photos[3] = "images/sheetmusic.jpg";

function backward() {
  if (photoindex > 0) {
    document.images.p.src = photos[--photoindex];
  }
}

function forward() {
  if (photoindex < photos.length - 1) {
    document.images.p.src = photos[++photoindex];
  }
}

for (i = 0; i < photos.length; i++) {
  document.write("<a href=\"javascript: goto(" + i + ");\">" + i + "</a> ");
}

function goto(n) {
  if (n < photos.length && n >= 0) {
    photoindex = n;
    document.images.p.src = photos[photoindex];
  }
}

<br>
<div style="text-align:center;left:5px;">
  <table width="250" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="3" align="center" valign="top">
        <img src="images/weloveweb.png" name="p" width="250" height="188" id="p" />
      </td>
    </tr>
    <tr>
      <td valign="top"><a href="javascript: backward();">&lt;&lt;</a>
      </td>
      <td valign="top" style="text-align: center">
      </td>
      <td valign="top" style="text-align: right"><a href="javascript: forward();">&gt;&gt;</a>
      </td>
    </tr>
  </table>
</div>

Answer 1

由于您的缩略图 url 存储在 photos 数组中，因此要显示缩略图而不是其索引，您需要做的是创建一个 img 标签，其中包含 src 属性包含每个缩略图的 url(即 photos[i])。

改变:

for (i = 0; i < photos.length; i++) {
  document.write("<a href=\"javascript: goto(" + i + ");\">" + i + "</a> ");
// ------------------------------------------------------------^ change this `i`
}

进入:

for (i = 0; i < photos.length; i++) {
  document.write("<a href=\"javascript: goto(" + i + ");\">" + "<img src=" + photos[i] + "/></a> ");
}