简单的图片展示

2020-05-10  本文已影响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>
效果
上一篇 下一篇

猜你喜欢

热点阅读