【JavaScript】JS+DOM实现图片库

来源：互联网发布：淘宝联盟登上去不能用编辑：程序博客网时间：2024/05/16 10:40

【前言】

前面写过的JS博客有提过DOM，理论的知识有了一些了解还远远不不够，动手实践一个小例子会让你印象更加深刻。本篇博客借鉴《JavaScript DOM 编程艺术》中的小例子，希望可以给读者带来收获！

【有关图片库的思考】

把图片放到网页上显示不是什么难事，方法有很多种。简单放入一个网页中未尝不可，但是当图片数量越来越多的时候，网页标记代码没多少，但加上很多图片后，用户要下载的数据量就相当可观了。我们必须要面对的现实就是——没有人愿意等很长的时间下载一个网页。

那么为每张图片分别创建一个网页的解决方案感觉还不错，这样减少了图片库的体积，改变了难以下载的大网页。取而代之的是很多尺寸合理，便于下载浏览的页面。但是，这个方案也不太方便，给每张图片分别制作一个网页需要花费很多时间，其次每个网页上也应该提供某种导航链接来给出当前图片在整个图片库里的位置，方便人们从当前图片转到其他图片。

想两全其美，JS再好不过了，把整个图片库的链接放在图片库的主页上，用户只需点击某个图片链接再把相应照片传递过去。

【实现】

首先给图片创建链接清单，使用无序清单元素 <ul>来帮忙，看下面的代码。

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Image Gallery</title></head><script type="text/javascript" src="scripts/showPic.js"></script><body><h1>Snapshots</h1><ul><li><a href="images/Taylor.jpg" onclick="showPic(this); return false;" title="Taylor is so beautiful">Taylor</a></li><li><a href="images/Red.jpg" onclick="showPic(this); return false;" title="Taylor is so beautiful">Red</a></li><li><a href="images/BuleTaylor.jpg" onclick="showPic(this); return false;" title="Taylor is so beautiful">BuleTaylor</a></li><li><a href="images/Curly.jpg" onclick="showPic(this); return false;" title="Taylor is so beautiful">CurlyTaylor</a></li></ul></body></html></>

把上面的标记保存到gallery.html文件，并把图片集中存放在目录为images的文件夹里。确保gallery.html和 images在同一个目录下。

实现效果，就是每点击某个链接，就可以跳转到相应的图片，但是从图片返回到链接清单那里还必须得用到浏览器的后退按钮。

你也发现了一些可以改进的地方吧，可不可以点击链接的时候就留在本页面看图片，无需转到另一个窗口，可不可以点击链接之后，可以在网页上同时看到图片和原有的图片清单。

原书作者想到了一个很棒的idea，就是增加一个“占位符”图片，为图片预留一个浏览器区域，当点击某个链接的时候，拦截这个网页的默认行为，把“占位符”图片替换为与链接相对应的图片。

说到“占位符”图片，我们需要再向清单代码末尾里添加一句

<img id="placeholder" src="images/Java.JPEG" alt="my image gallery" />

对于id属性的设置利于我们通过样式表来控制图片的位置和显示效果，还可以在JavaScript里使用这个id值哦！

【JavaScript显身手】

把“占位符”图片替换为想要查看的图片，需要改变它的src属性，setAttribute是最佳选择。

function showPic(whichpic){var source=whichpic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);}

参数 whichpic代表一个元素节点，具体而言就是指向某个图片的<a>元素，我们需要分解出图片的文件路径，这可以通过在 whichpic元素上调用 getAttribute得到，只需把href作为参数传递给getAttribute就可以啦。

最后的效果就是主页是这个样子

点击链接后就是这个样子，还是这个页面不过更换了图片，但是还可以看到图片清单~~

【小结】

感谢《JavaScript DOM编程艺术》这本书，在学习JS的过程中帮助了我很多，真的写的很棒~也感谢送这本“生日礼物”书给我的丹丹亲，今天刚好她生日所以Happy Birthday~对于JS的学习还会有更新，下次见~~

1 0