美文网首页
简单的图片展示

简单的图片展示

作者: 一枚小菜 | 来源:发表于2020-05-10 14:27 被阅读0次

实现点击小图展示大图
通过getElementById拿到标签更改其图片路径

<div>
        <ul>
            <li>
                <a href="./images/15c95a1535b86c49f806f11bb43a2594.jpg" title="刘亦菲"
                   onclick="showPic(this);return false">
                    <img src="./images/15c95a1535b86c49f806f11bb43a2594.jpg"/>
                </a>
            </li>
            <li>
                <a href="./images/1fd69d587cb4493351c206b012fe937b.jpg" title="背影" onclick="showPic(this);return false">
                    <img src="./images/1fd69d587cb4493351c206b012fe937b.jpg"/>
                </a>
            </li>
        </ul>
    </div>
    <div style="display:flex;">
        <img id="image" src="./images/25057f7dddd19a810722e2233f6f2f4b.jpg" width="500px"/>
        <p id="text">请选择</p>
    </div>
<script>
    function showPic(item) {
        var img = document.getElementById("image")
        img.src = item.href
        var tex = document.getElementById("text")
        tex.innerText = item.title
    }
</script>
效果

相关文章

网友评论

      本文标题:简单的图片展示

      本文链接:https://www.haomeiwen.com/subject/gisunhtx.html