王雨的web前端练习01---js幻灯（纯手打）

本人对前端比较感兴趣，就自学JavaScript，这是学习了语法和一点DOM知识后的一个练习。

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="hd">
    <ul id="imagegallery">
        <li><a href="img/b1.jpg" title="GTA5img1"><img src="img/s1.jpg" width="228" alt="侠盗飞车5图1"></a>
        </li>
        <li><a href="img/b2.jpg" title="GTA5img2"><img src="img/s2.jpg" width="228" alt="侠盗飞车5图2"></a>
        </li>
        <li><a href="img/b3.jpg" title="GTA5img3"><img src="img/s3.jpg" width="228" alt="侠盗飞车5图3"></a>
        </li>
        <li><a href="img/b4.jpg" title="GTA5img4"><img src="img/s4.jpg" width="228" alt="侠盗飞车5图4"></a>
        </li>
    </ul>
</div>
<img src="img/zw.png" alt="占位图片" id="placeholder">
<p id="description">选择一个图片</p>
</body>
</html>

　　js

/**
 * Created by wangyu on 2017-04-21.
 */

function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return false;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("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 false;
    }
}

function prepareGallery() {
    if (!document.getElementsByTagName) return false;
    if (!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);
        }
        links[i].onkeypress = links[i].onclick;
    }
}

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

addLoadEvent(prepareGallery);

　　css

#hd ul{
    text-align: center;
    list-style-type: none;
}
li{
    float: left;
    padding: 16px;
    list-style-type: none;
    display: inline;
}
#placeholder{
    padding-left: 170px;
}

　　

posted @ 2017-05-03 21:30  王雨的博客  阅读(131)  评论(0)  编辑  收藏  举报