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

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

function insertAfter(newEle, targetEle){
    var parentEle = targetEle.parentNode;
    if(parentEle.lastChild == targetEle){
        parentEle.appendChild(newEle);
    }
    else{
        parentEle.insertBefore(newEle, targetEle.nextSibling);
    }
}

 

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

切换图片的函数

/*遍历图库里面的每一个链接，当用户点击某一个链接时，就会调用showPic函数*/ 
function picGallery(){
    if(!document.getElementsByTagName){
        return false;
    }
    if(!document.getElementById){
        return false;
    }
    if (!document.getElementById('imgShowList')) {
        return false;
    }
    var imgShowList = document.getElementById('imgShowList');
    var Links = imgShowList.getElementsByTagName('a');
    for (var i = 0; i<Links.length; i++) {
        Links[i].onclick = function(){
            return showPic(this) ? false : true;
        }
    }
}

function showPic(obj){
    if(!document.getElementById("imgBox")) return false;
    var source = obj.getAttribute("href");
    var oImgPlace = document.getElementById("imgBox");
    if (oImgPlace.nodeName != "IMG") return false;
    oImgPlace.setAttribute("src", source);

    if (document.getElementById("desc")){
        var oTxt = obj.getAttribute("title") ? obj.getAttribute("title") : "";
        // var oTxt = obj.getAttribute("title");
        var oDesc = document.getElementById('desc');
        //p元素本身是是一个空值，文本节点是p元素里面的第一个子节点。
        if (oDesc.firstChild.nodeType == 3) {
            oDesc.firstChild.nodeValue = oTxt;
        }
    }
    return true;
}

绑定多个函数

/*绑定多个函数*/ 
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.从而实现效果。

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