JS练习------图片库

最新推荐文章于 2024-06-15 22:06:02 发布

chengquying3939

最新推荐文章于 2024-06-15 22:06:02 发布

阅读量74

点赞数

原文链接：https://my.oschina.net/zhangqiliang/blog/1919309

版权

html:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="layout.css" media="screen">
    </head>
    <body>
        <h1>photo space</h1>
        <ul>
            <li>
                <a href="./image/1.jpg" title="photo1" onclick="showPic(this); return false;">photo1</a>
            </li>
            <li>
                <a href="./image/2.jpg" title="photo2" onclick="showPic(this); return false;">photo2</a>
            </li>
            <li>
                <a href="./image/3.jpg" title="photo3" onclick="showPic(this); return false;">photo3</a>
            </li>
            <li>
                <a href="./image/4.jpg" title="photo4" onclick="showPic(this); return false;">photo4</a>
            </li>
        </ul>
        <img id="placeholder" src="./image/5.jpg" alt="photo5">
        <p id="description">choose a photo</p>
        <script src="showPic.js"></script>
    </body>
</html>

js:

function showPic(whichpic){
    //获取传入对象的href属性值
    var source = whichpic.getAttribute("href");
    //找到ID为placeholder的组件
    var placeholder = document.getElementById("placeholder");
    //设置图片容器组件的src为传入对象的href
    placeholder.setAttribute("src",source);
    //获取传入对象的title属性值
    var text = whichpic.getAttribute("title");
    //找到ID为description的组件
    var description = document.getElementById("description");
    //设置描述容器第一个子级文本内容
    //nodeValue属性：想要改变一个文本节点的值，就要使用DOM方法的nodeValue属性。
    description.firstChild.nodeValue = text;
}

首先，看到页面有一个图片容器以及描述容器，里面都有其默认的内容。

还有四个超链接，分别指向了四张不同的图片。点击这些超链接时，会触发showPic方法，this(代表的是当前标签a)，另外return false语句说明我们在点击该超链接时，只会调用showPic方法，不会跳转到另外一个页面。

转载于:https://my.oschina.net/zhangqiliang/blog/1919309