JavaScript缩略图图像

时间:2016-10-07 16:02:11

标签: javascript html

我正在尝试设计此网站,以便在其他图片的小缩略图选项上方显示中间图像的图像显像。

问题是,它现在显示的方式,每个人说的“缩略图”显示为完整尺寸。我尝试在document.write部分编辑JavaScript以添加高度和宽度元素,但它无法正常工作。

有人可以帮助我开始工作吗?我已经将代码默认为显示全尺寸图像而不是缩略图。

这是我到目前为止所做的:

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];
  }
}

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

<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">
        <script type="text/javascript">
        for (i = 0; i < photos.length; i++) {
          document.write("<a href=\"javascript: goto(" + i + ");\">" + "<img src='" + photos[i] + "' /></a> ");
        }
        </script>
      </td>
      <td valign="top" style="text-align: right"><a href="javascript: forward();">&gt;&gt;</a></td>
    </tr>
  </table>
</div>

0 个答案:

没有答案