点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面

最新推荐文章于 2023-05-19 13:48:42 发布

salodyliu

最新推荐文章于 2023-05-19 13:48:42 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/truman2011/article/details/50513372

web前端学习专栏收录该内容

2 篇文章

订阅专栏

This blog showcases an HTML-based image gallery featuring interactive picture display through JavaScript. It includes links to various images and a function to dynamically change the displayed picture.

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <script type="text/javascript" src="js/showPic.js" ></script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="images/ad.jpg" onclick="showPic(this);return false;" title="A fireworks display" >Fireworks</a></li>
        <li><a href="images/ad2.jpg"  title="A cup of black coffee" onclick="showPic(this);return false;">coffee</a></li>
        <li><a href="images/ad3.jpg" onclick="showPic(this);return false;" title="A red, red rose">Rose</a></li>
        <li><a href="images/ad4.jpg" title="the famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
        <img id="placeholder" src="images/placeholder.jpg" alt="my img gallery"/>
    </ul>   
</body>
</html>

JS代码

 function showPic(whichpic)
 {
    var source = whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src", source);

}

显示结果如下：