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.從而實現效果。

這是我的一些心得,不足之處,還請指教。

 

 

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM