JavaScript DOM 图片库---动态创建图片

<ul id="imgShowList">
        <li><a href="image/1 (1).jpg" title="image/1 (1).jpg">图片1</a></li>
        <li><a href="image/1 (2).jpg" title="image/1 (2).jpg">图片2</a></li>
        <li><a href="image/1 (3).jpg" title="image/1 (3).jpg">图片3</a></li>
        <li><a href="image/1 (4).jpg" title="image/1 (4).jpg">图片4</a></li>
        <li><a href="image/1 (5).jpg" title="image/1 (5).jpg">图片5</a></li>
        <li><a href="image/1 (6).jpg" title="image/1 (6).jpg">图片6</a></li>
        <li><a href="image/1 (7).jpg" title="image/1 (7).jpg">图片7</a></li>
        <li><a href="image/1 (8).jpg" title="image/1 (8).jpg">图片8</a></li>
    </ul>

上面是HTML里面的代码结构。

实现的原理是：当点击相应的链接时，动态创建一个图片容器，和该图片的描述信息，并且将图片和描述信息分别显示在各自容器里面。在这里用一个<img><p>标签作为该容器，同时设置id为imgBox，desc，

下面开始是动态创建一个图片容器，和该图片的描述信息的函数：

 1 1 function prepareImgBox(){
 2  2     if(!document.createElement) return false;
 3  3     if (!document.createTextNode) return false;
 4  4     if (!document.getElementById(‘imgShowList‘)) return false;
 5  5     /*创建图片，并且设置属性*/
 6  6     var oImgBox = document.createElement("img");
 7  7     oImgBox.setAttribute("id", "imgBox");
 8  8     oImgBox.setAttribute("src", "image/1.jpg");
 9  9     oImgBox.setAttribute("alt", "图片一");
10 10 　　/*创建图片描述信息*/
11 11     var oDesc = document.createElement("p");
12 12     oDesc.setAttribute("id", "desc");
13 13     var oTxt1 = document.createTextNode("description");/*此处的图片描述可以自定义*/
14 14     oDesc.appendChild(oTxt1);
15 15     var imgShowList = document.getElementById(‘imgShowList‘);
16 16 　　/*插入图片以及图片描述信息*/
17 17     insertAfter(oImgBox, imgShowList);
18 18     insertAfter(oDesc, oImgBox);
19 19 }

其中，insertAfter为将目标元素插入指定元素后面的函数：

1 function insertAfter(newEle, targetEle){
2     var parentEle = targetEle.parentNode;
3     if(parentEle.lastChild == targetEle){
4         parentEle.appendChild(newEle);
5     }
6     else{
7         parentEle.insertBefore(newEle, targetEle.nextSibling);
8     }
9 }

鼠标点击不同的链接时，切换相应的目标图片，

切换图片的函数

 1 /*遍历图库里面的每一个链接，当用户点击某一个链接时，就会调用showPic函数*/
 2 function picGallery(){
 3     if(!document.getElementsByTagName){
 4         return false;
 5     }
 6     if(!document.getElementById){
 7         return false;
 8     }
 9     if (!document.getElementById(‘imgShowList‘)) {
10         return false;
11     }
12     var imgShowList = document.getElementById(‘imgShowList‘);
13     var Links = imgShowList.getElementsByTagName(‘a‘);
14     for (var i = 0; i<Links.length; i++) {
15         Links[i].onclick = function(){
16             return showPic(this) ? false : true;
17         }
18     }
19 }

 1 function showPic(obj){
 2     if(!document.getElementById("imgBox")) return false;
 3     var source = obj.getAttribute("href");
 4     var oImgPlace = document.getElementById("imgBox");
 5     if (oImgPlace.nodeName != "IMG") return false;
 6     oImgPlace.setAttribute("src", source);
 7
 8     if (document.getElementById("desc")){
 9         var oTxt = obj.getAttribute("title") ? obj.getAttribute("title") : "";
10         // var oTxt = obj.getAttribute("title");
11         var oDesc = document.getElementById(‘desc‘);
12         //p元素本身是是一个空值，文本节点是p元素里面的第一个子节点。
13         if (oDesc.firstChild.nodeType == 3) {
14             oDesc.firstChild.nodeValue = oTxt;
15         }
16     }
17     return true;
18 }

绑定多个函数

/*绑定多个函数*/
function addLoadEvent(func){
    //把现有window.onload事件处理函数的值存入变量oldonload
    var oldonload = window.onload;
    //若此事件处理函数没有绑定任何函数，则添加新函数。
    if (typeof window.onload != ‘function‘) {
        window.onload = func;
    }
    //否则，把新的函数追加到现有指令末尾。
    else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

/*为了启用这些功能用addLoadEvent函数来调用prepareImgBox、picGallery函数*/
addLoadEvent(picGallery);
addLoadEvent(prepareImgBox);

总之，一句话，创建img、p两个元素，现在页面上加载一张图片，用户点击切换不同的图片时，同步读取该链接的href、title属性值，赋值给img的src，p的nodeValue.从而实现效果。

这是我的一些心得，不足之处，还请指教。