15、动态网站、HTML5 应用与 JavaScript 基础全解析

动态网站、HTML5 应用与 JavaScript 基础全解析

1. 基于用户交互的图像切换

在网页开发中，基于用户交互的图像切换是一种实用且动态的交互方式。以一个页面为例，它包含一个大图像，旁边配有一些文本，页面下方还有三个小图像。仔细观察小图像列表，会发现第一个小图像实际上是大图像的缩小版本，这是小型图库常见的显示类型，比如在线目录中商品展示，会有商品描述和几个不同视角的图片。

从显示和带宽角度考虑，在页面上使用多个大图像不太方便，因此这种图库视图是展示替代图像的流行方式。

大图像通过以下 <img> 标签调用：

<img
   id="large_photo"
   style="border: 1px solid black; margin-right: 13px;"
   src="mariposa_large_1.jpg"
   alt="large photo">

这里的 style 、 src 和 alt 属性应该比较容易理解。同时，该图像被赋予了 large_photo 的 ID，在 DOM 中可通过 document.images['large_photo'] 引用图像，这很重要，因为 JavaScript 可以动态改变 document.images['large_image'].src 的值，即图像的源路径。 <