DOM实现JavaScript图片库

我想说的

我比较菜(小声bb)

实现

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test1</title>
    <script type="text/javascript" src="tupianku.js"></script>
</head>
<body>
        <h1>Test</h1>
        <ul>
            <li >
                <a href="1.jpg" onclick="showpic(this);
                 return false">image1</a>
            </li>
            <li>
                <a href="2.jpg" onclick="showpic(this);
                 return false">image2</a>
            </li>
            <li>
                <a href="3.jpg" onclick="showpic(this);
                 return false">image3</a>
            </li>
        </ul>
        <img id="img123" src="https://cdn.elstec.cn/14/5.jpg">
</body>
</html>

JS部分

function showpic(whitchpic) {
    var bianliang = whitchpic.getAttribute("href");
    var place = document.getElementById("img123");
    place.setAttribute("src",bianliang);
}

原理

创建一个函数名为 showpicwhitchpic 为参数。whitchpic 通过调用 getAttribute ,把 "href" 作为参数传递给 getAttribute ,声明一个变量并把语句赋给它。 接下来获取占位图,需要在 html 部分进行修改。 <img> 元素添加 id ,调用 document.getElementById ,再次声明一个变量并把语句赋给它。最后通过 setAttribute 进行实现。

变量2.setAttribute("src",变量1);

html部分中,都是采用 <a> 元素,添加处理函数 showpic(this); return false ,防止被带到新窗口。

效果

test1

看完了全文为什么不评论一下呢?xd