图片库程序（动态创建标记）

图片库程序（有误）

images gallery.html

Snapshots

 

  katong
 
 

  off
 
 

  a man
 
 

  sun 
 
 

  two head
 

layout.css

@charset "utf-8";
/* CSS Document */

body{
    font-family:"Helvetica","Arial",serif;
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
    }
h1{
    color:#333;
    background-color:transparent;
    }
a{
    color:#c60;
    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; 
    }
#imagegallery{
     list-style:none;
    }
#imagegallery{
     display:inline;
    }

showPic.js

function addLoadEvent(func){
     var oldonload=window.onload;
     if(typeof window.onload!='function'){
         window.onload=func;
         }else{
              window.onload=function(){
                   oldonload();
                   func();
                  }
             }
    }
    
function insertAfter(newElement,targetElement){
     var parent=targetElement.parentNode;
     if(parent.lastChild==targetElement){
         parent.appendChild(newElement);
         }else{
              parent.insertBefore(newElement,targetElement.nextSibling);
             }
    }
    
function preparePlaceholder(){
     if(!document.createElement)return false;
     if(!document.createTextNode)return false;
     if(!document.getElementById)return false;
     if(!document.getElementById("imagegallery"))return false;
     
     var placeholder=document.createElement("img");
     placeholder.setAttribute("id","placeholder");
     placeholder.setAttribute("src","images/6.jpg");
     placeholder.setAttribute("alt","my image gallery");
     var description=document.createElement("p");
     description.setAttribute("id","description");
     var desctext=document.createTextNode("Choose an image");
     description.appendChild(desctext);
     var gallery=document.getElementById("imagegallery");
     insertAfter(placeholder,gallery);
     insertAfter(description,placeholder);
     
    }
    



/*function countBodyChildren(){
     var body_element=document.getElementsByTagName("body")[0];
     alert(body_element.nodeType);
    }
    window.onload=countBodyChildren;*/
function prepareGallery(){
    if(!document.getElementsByTagName)return false;     
    if(!document.getElementById)return false; 
    if(!document.getElementById("imagegallery"))return false;   //检查浏览器是否理解getElementByTagName和ById；是否存在id为imagegallery元素
    var gallery=document.getElementById("imagegallery");        //遍历imagegallery元素中所有链接
    var links=document.getElementsByTagName("a");
    for(var i=0;i

页面效果
![图片1.png](https://upload-images.jianshu.io/upload_images/13144674-d2e8f7e341390850.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240