JavaScript第四章：标记-优快云博客

本文链接：https://blog.youkuaiyun.com/rachel9798/article/details/82661181

本文介绍如何使用JavaScript和DOM实现一个图片库。通过创建链接清单，让图片预览和导航列表保持在同一页面上，并通过替换占位符图片实现无缝浏览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.介绍

这一章，我们将尝试用JavaScript和DOM建立一个图片库。把整个图片库的浏览器链接集中安排在图片库主页里，只有用户点击了该主页的某个图片的链接才把相应的图片传给他。

2.标记

第一项工作：为这些图片创建一个链接清单。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
  <h1>SnapChats</h1>
  <ul>
    <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_1.jpg" title="JavaScript第三章图片1">Picture 1</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_2.jpg" title="JavaScript第三章图片2">Picture 2</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_3.jpg" title="JavaScript第三章图片3">Picture 3</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_4.jpg" title="JavaScript第三章图片1">Picture 4</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_5.jpg" title="JavaScript第三章图片1">Picture 5</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_6.jpg" title="JavaScript第三章图片1">Picture 6</a>
    </li>
   </ul>
</body>
</html>

希望改进的几个地方及改进方法：

当点击某个链接，希望能留在这个网页。

解决方法：在点击某个链接，拦截这个网页的行为

当点击某个链接，希望能在这个网页同时看到那张图片和原有的图片清单

解决方法：通过增加“占位符”图片在主页为图片预留一个浏览区域，点击某个图片链接时，把“占位符”图片替换为那个链接相对应的图片。

<!--解决占位符图片的问题-->
<!--把下面这些代码插入到图片清单的末尾-->

<img id="placeholder" src="file:///E|/JavaScript第四章/images/01.jpg" alt="my image gallery"/>