JavaScript实现淘宝商品展示(鼠标放在小图片上，上面会出现相应的大图片)

最新推荐文章于 2023-12-21 22:30:00 发布

Hairui瑞

最新推荐文章于 2023-12-21 22:30:00 发布

阅读量4k

点赞数 7

分类专栏：前端文章标签： JavaScript dom 动态注册事件

本文链接：https://blog.csdn.net/qq_44322357/article/details/102491116

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

最终效果：

代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>图片放大效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.goodsShow ul{
				list-style: none;
				margin-top: 30px;
			}
			.goodsShow{
				width: 400px;
				height: 480px;/* 计算好的,大图是400px,小图是50px,大图和小图上下间隔30px; */
			}
			.goodsShow p{
				border: 1px solid #ccc;
			}
			.goodsShow ul li{
				float: left;
				margin-left: 64px;
			}
			.goodsShow ul li img{
				cursor: pointer;/* 鼠标放小图片上变成手的形状 */
			}
		</style>
		//-----------------------------------------------------------------------------------
		<script type="text/javascript">
			window.onload = function(){
				var ul = document.getElementById("smUl"); //先得到ul的引用对象
				var imgs = ul.getElementsByTagName("img"); //再通过ul的引用对象得到img的引用对象
				for (var i = 0; i < imgs.length; i++) {//遍历注册事件
					imgs[i].onmouseover = function(){
						var bigImg = document.getElementById("detail");
						bigImg.src = this.getAttribute("data");
					}
				}
			}
		</script>
		//------------------------------------------------------------------------------------------
	</head>
	<body>
		<div id="container" class="goodsShow">
			<p><img src="./images/1.jpg" id = "detail"></p>
			<ul id = "smUl">
				<li><img src="./images/01.webp" data="./images/1.jpg"> </li>
				<li><img src="./images/02.webp" data="./images/2.jpg"> </li>
				<li><img src="./images/03.webp" data="./images/3.jpg"> </li>
			</ul>
		</div>
	</body>
</html>