javascript图片库

最新推荐文章于 2022-06-26 21:17:05 发布

fuying88958

最新推荐文章于 2022-06-26 21:17:05 发布

阅读量117

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的JavaScript代码实现，当用户点击网页上的链接时，相应位置会动态加载并显示图片。通过HTML结构和JavaScript函数的结合，实现了用户交互与动态内容展示的无缝连接。

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

今天做了一个点击一个链接就在相应位置出现图片的DEMO：

javascript代码：

<script>
	function showPic(whichpic){ //把这个函数命名为showPic,给这个函数的参数命名为whichpic
		var souce = whichpic.getAttribute("href"); //把它的路径存入变量souce
		var placeholder = document.getElementById("placeholder") //获取placeholder的位置，把把它赋给变量placeholder
		placeholder.setAttribute("src",souce);//使用setAttribute方法对placeholder元素的src属性进行刷新
	}
</script>

html代码：

<h1>Snapshots</h1>
<ul>
	<li><a href="images/01.jpg" οnclick="showPic(this);return false;" title="one" >第一张图片</a></li>
	<li><a href="images/02.jpg" οnclick="showPic(this);return false;" title="two" >第二张图片</a></li>
	<li><a href="images/03.jpg" οnclick="showPic(this);return false;" title="three" >第三张图片</a></li>
	<li><a href="images/04.jpg" οnclick="showPic(this);return false;" title="four" >第一张四片</a></li>
</ul>
<img id="placeholder" src="images/06.jpg" / alt="图片库">

最终效果（位置和效果都可以自己写css来控制）：