这篇博客展示了如何使用JavaScript和DOM创建一个图片库。首先，图片存储在images目录下，然后使用一个‘占位符’图片。通过JavaScript函数`showPic`，动态改变图片的src属性以替换‘占位符’，并在用户点击链接时显示相应的图片。同时，该函数还更新图片描述。此功能在`photo.html`中应用，并引用了`scripts/showPic.js`中的函数定义。
现在，是时候让DOM去做一些事了，我们用JavaScript和DOM去建立一个图片库。
1、把图片集中保存在images目录里，
2、解决“占位符”图片的问题，我选用了一个类似于名片的图片，你可以根据个人喜好来决定选用的图片。
3、为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。setAttribute是完成这项工作的最佳选择，而我将利用这个方法写一个函数。这个函数只有一个参数，即一个图片链接。它通过改变“占位符”图片的src属性的办法将其替换为参数图片。
4、应用这个JavaScript函数，函数写完了，接下来就要在图片库文档里使用它，把这个函数保存在扩展名为.js的文本文件中
photo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
<link rel = "stylesheet" href = "styles/layout.css" media = "screen"/>
</head>
最低0.47元/天 解锁文章
扫一扫
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
