Gallery Modified a little

最新推荐文章于 2024-04-25 19:18:54 发布

__BMGT()

最新推荐文章于 2024-04-25 19:18:54 发布

阅读量187

点赞数

分类专栏： JavaScript Error Solution

Error Solution 同时被 2 个专栏收录

140 篇文章 0 订阅

订阅专栏

JavaScript

85 篇文章 0 订阅

订阅专栏

function showPic(whichPic){
    var placeHolder = document.getElementById("placeHolder");
    if(!placeHolder)return false;//节点存在性判断
    if(placeHolder.nodeName != "IMG")return false;//节点标签判断
    var src = whichPic.getAttribute("href");
    placeHolder.setAttribute("src",src);
    // console.log("execute : "+whichPic);
    
    var title = whichPic.getAttribute("title");

    var description = document.getElementById("description");
    if(description){
        if(description.firstChild.nodeType==3){
            // description.childNodes[0].nodeValue = title;
            description.firstChild.nodeValue = title;
        }
    }
    return true;
    
}
function prepareGallery(){
    
    if(!document.getElementById || !document.getElementsByTagName){
        return;
    }

    var imageGallery = document.getElementById("ImageGallery");
    if(imageGallery){
        var links = imageGallery.getElementsByTagName("a");
        for(var i=0;i<links.length;i++){
            // console.log(links[i]);
            links[i].οnclick=function(){
                return !showPic(this);
            }
        }
    }

}
function addLoadEvent(func){
    var oldLoad = window.onload;
    if(typeof oldLoad != "function"){
        window.onload = func;
    }
    else{
        window.οnlοad=function(){
            oldLoad();
            func();
        }
    }
}


addLoadEvent(prepareGallery);

body{
    font-family: "Helvetica","Arial",serif;
    background-color: #cccccc;
    margin: 1em 10%;
}
h1{
    color: #333333;
    background-color: transparent;/*透明*/
}
a{
    color: #cc6600;
    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;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="styles/layout.css" />
    <script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
    <h1>Images</h1>
    <ul id="ImageGallery">
        <li>
            <a href="images/a.jpg" title="A" >亚索</a>
        </li>
        <li>
            <a href="images/b.jpg" title="B" >琴女</a>
        </li>
        <li>
            <a href="images/c.jpg" title="C" >蛮王</a>
        </li>
        <li>
            <a href="images/d.jpg" title="D" >齐天大圣</a>
        </li>
        <li>
            <a href="images/e.jpg" title="E">赵云</a>
        </li>
        

    </ul>

    <img id="placeHolder" src="images/a.jpg" alt="My image gallery"/>
    <p id="description">Choose an image.</p>

</body>
</html>