点击小图，显示大图（后续需要修改）

XiaoXiongV

于 2018-12-25 03:41:12 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_37607451/article/details/85242006

js 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的图片预览功能。通过点击不同的小图，可以更新大图的显示，并在页面上显示对应的小图标题。此功能常见于产品详情页或相册展示，提升了用户体验。

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

<body>
	<div id="dv">
		<ul>
			<li>
				<a href="img/1.jpg" title="1" id="">
					<img src="img/1.jpg" id=""/>
				</a>
			</li>
			<li>
				<a href="img/2.jpg" title="2" id="">
					<img src="img/2.jpg" id=""/>
				</a>
			</li>
			<li>
				<a href="img/3.jpg" title="3" id="">
					<img src="img/3.jpg" id=""/>
				</a>
			</li>
			<li>
				<a href="img/4.jpg" title="4" id="">
					<img src="img/4.jpg" id=""/>
				</a>
			</li>
		</ul>
		<img class="im" src="" id="im" />
		<p id="pp"></p>
		<script>
			function my$(id){
				return document.getElementById(id);
			}
			var objA=my$("dv").getElementsByTagName("a");
			for(var i=0;i<objA.length;i++){
				objA[i].onclick=function(){
					my$("im").src=this.href;
					my$("pp").innerText=this.title;
					return false;
				}
			}
		</script>
		<style>
		*{
			list-style: none;
		}
		li{
			height: 50px;
			width:  100px;
			/*background: pink;*/
			float: left;
			padding: 0px 10px;
		}
		img {
			height: 50px;
			width:  100px;
		}
		.im{
			height: 200px;
			width: 400px;
		}
		#dv{
			width: 700px;
			background-color: pink;
			/*height: 800px;*/
		}
		
	</style>
	</div>
</body>