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

梦里梦外; 2023-06-06 08:28 33阅读 0赞

**最终效果：**  
![2019101021284124.gif][]

代码部分：

<!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>

**解释下其中DOM对象中的几个方法：**

*  **getElementsByTagName:** 返回带有指定标签名的对象的集合（数组）。
 *  **getAttribute() ：** 返回指定属性名的属性值。
 *  **onload：**

> JS加载时和html是同步加载的，如果使用元素在定义元素之前易报错；使用onload后整个页面上所有元素加载完毕后再执行js的内容

[2019101021284124.gif]: /images/20230601/16aa99d4f40e4ed2b903ed6219372963.png