要使用js实现图片库的基本功能：当点击某个链接时，能留在这个页面查看图片，而不是转到另一个窗口。当点击某个链接时，能在这个页面同时看到那张图片以及原有的图片清单。apache php mysql
图片库html：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>image gallery</title> <link rel="stylesheet" href="static/layout.css" media="screen" /></head><body> <h1>avengers</h1> <ul> <li> <a href="./images/1.jpg" title="avengers1" onclick="showpic(this); return false;">aaaar1</a> </li> <li> <a href="./images/2.jpg" title="avengers2" onclick="showpic(this); return false;">aaaar2</a> </li> <li> <a href="./images/3.jpg" title="avengers3" onclick="showpic(this); return false;">aaaar3</a> </li> <li> <a href="./images/4.jpg" title="avengers4" onclick="showpic(this); return false;">aaaar4</a> </li> </ul> <img id="placeholder" src="./images/5.jpg" alt="aaaar5" /> <p id="description">choose an image.</p> <script src="static/showpic.js"></script></body></html>
css渲染文件：
body { font-family: "helvetica", "arial", serif; color: #333; background-color: #ccc; margin: 1em 10%;}h1 { color:#333; background-color: transparent;}a { color:#60; background-color: transparent; font-weight: bold; text-decoration: none;}ul { padding: 0;}li { float: left; padding: 1em; list-style:none;}img { display: block; clear: both;}
拟定解决方法：
通过一个占位符图片的方法在这个主页上为图片预留一个浏览区域。
在点击某个链接时，拦截这个网页的默认行为。
在点击某个链接时，把占位符图片替换为与那个链接相对应的图片。
先选择一张图片做为占位符：
<img id="placeholder" src="./images/5.jpg" alt="aaaar5" />
要想替换占位符图片为想要查看的图片，需要改变它的src属性。js中的setattribute函数可以做到这一点。可以利用这一特性来编写一个js函数来解决问题。
function showpic(whichpic)
这个函数仅接受一个图片链接参数，用来转换图片。whichpic作为一个元素节点，可以使用getattribute函数来得到它的href属性：
var source = whichpic.getattribute("href");
然后获取占位符图片：
var placeholder = document.getelemntbyid("placeholder");
得到占位符图片对象后，就可以对占位图对象进行属性设置，即替换相应的图片。
placeholder.setattribute("src", source);
完整的函数：
function showpic(whichpic) { var source = whichpic.getattribute("href"); var placeholder = document.getelementbyid("placeholder"); placeholder.setattribute("src", source);}
接下来就要将这个js函数和标记文档结合起来。
事件处理函数：事件处理函数的作用是：在特定事件发生时调用特定的js代码。
这里想要在用户点击某个链接的时候触发一个动作，所以需要使用onclick事件处理函数。
showpic函数需要一个参数：一个带有href属性的元素节点参数。这里可以使用this关键字，this关键字指代的是当前的标签元素。
同样的，我还想在链接被点击时不会跳到另一个窗口，因此需要阻断掉链接被点击时的默认行为，只进行js函数触发的替换图片行为。
这里可以给js函数添加一个返回值false，这样onclick函数就会认为这个链接没有被点击，从而不会打开一个新窗口。
具体代码：
<a href="./images/1.jpg" title="avengers1" onclick="showpic(this); return false;">aaaar1</a>
这里的this关键字就是指代的<a>这个元素节点。
这样就完成了图片库需求的功能。
对这个函数进行扩展：
我还想在点击页面的时候切换图片的描述。图片库文档里每个图片都有一个title属性，同样的思路：
var text = whichpic.getattribute("title");
先得到title属性，再进行替换。
childnodes属性：可以用来获取任何一个元素的所有子元素。
假设需要将body元素中的所有子元素提取出来：查看body有多少个子元素。
var body_element = document.getelementsbytagname = ("body")[0];alert(body_element.childnodes.length);
[0]表示取得的是数组中第一个（也是唯一一个）body元素。
由childnodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点，事实上文档中几乎每一样东西都是一个节点。所以返回的值很大。
nodetype属性：使用nodetype属性来找到相应的节点。不过nodetype的返回值并不是英文：
元素节点返回1；
属性节点返回2；
文本节点返回3；
alert(body_element.nodetype);
通过这条语句来查看节点。
回到要增加的功能：首先跟图片一样，要增加一个文字描述的占位符，设置id属性
<p id="description">choose an image.</p>
将其放置在图片的下方，接下来就要让图片的title替换这个文本内容：
var text = whichpic.getattribute("title");var description = document.getelementbyid("description");
nodevalue属性：想要改变一个文本节点的值，就要使用dom方法的nodevalue属性。
此例中，包含在p元素中的文本节点是<p>元素的第一个子节点，因此，需要得到的是第一个子节点的nodevalue属性值。
alert(description.childnodes[0].nodevalue);
firstchild和lastchild值
childnodes[0]可以使用firstchild来替换，最后一个子节点用lastchild来表示。
最后，使用nodevalue来刷新文本：
完整代码：
function showpic(whichpic) { var source = whichpic.getattribute("href"); var placeholder = document.getelementbyid("placeholder"); placeholder.setattribute("src", source); var text = whichpic.getattribute("title"); var description = document.getelementbyid("description"); description.firstchild.nodevalue = text;}
将text的值传给e388a4556c0f65e1904146cc1a846bee元素的文本节点，目标达成。
页面效果：
相关文章：
javascript图片本地预览功能的实现方法
javascript模仿pinterest实现图片预加载功能
相关视频：
使用javascript-李炎恢javascript视频教程
以上就是使用javascript实现图片库的基本功能案例详解（附代码）的详细内容。