JavaScript图片库

css文件

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 li{ display:inline;}
#imagegallery li a img{ border:0;}

js文件

function preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return;

    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/5.jpg");
    placeholder.setAttribute("alt", "my image gallery");
    placeholder.setAttribute("width", "400px");
    placeholder.setAttribute("heigth", "400px");

    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 insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastchild == targetElement) {
        parent.appendChild(newElement);
    } else {
    parent.insertBefore(newElement, targetElement.nextSibling);
    }
}


function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return false;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    if (placeholder.nodeName != "IMG") return false;
    placeholder.src = source;
    if (document.getElementById("description")) {
        if (whichpic.getAttribute("title")) {
            var text = whichpic.getAttribute("title");
        } else {
            var text = "";
        }
        var description = document.getElementById("description");
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }

    }
    return true;
}
function prepareGallery() {
    if (!document.getElementsByTagName || !document.getElementById) return false;
    if (!document.getElementById("imagegallery")) {
        return false;
    }
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            return showPic(this) ? false : true;

        }
    }
}
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        }
    }
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

 

HTML页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Gallery</title>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>
        Snapshots</h1>
    <ul id="imagegallery">
        <li><a href="images/1.jpg" title="A fireworks display">Fireworks</a> </li>
        <li><a href="images/2.jpg" title="A coffee display">coffee</a> </li>
        <li><a href="images/3.jpg" title="A rose display">rose</a> </li>
        <li><a href="images/4.jpg" title="A clock display">clock</a> </li>
    </ul>
    
  
    <script src="js/showPic.js" type="text/javascript"></script>
</body>
</html>

 

 

posted @ 2014-01-13 20:00  Savant  阅读(242)  评论(0)    收藏  举报