码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-05-31 01:17:30      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

<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.从而实现效果。

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

 

 

 



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

标签:

原文地址:http://www.cnblogs.com/kenan9527/p/4541316.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!