<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#big{
width: 360px;
height: 360px;
background:url(01big.jpg) top center;
border: 1px solid gray;
margin-left: 300px;
margin-top: 200px;
}
.box{
width: 360px;
height: 70px;
margin-left: 300px;
}
ul{
list-style: none;
}
li{
float: left;
border: 1px solid gray;
}
ul img {
cursor: pointer;
}
</style>
</head>
<body>
<div id="big" ></div>
<div class="box">
<ul class="box01">
<li><img src="01.jpg" alt="连接失败" id="pic"></li>
<li><img src="02.jpg" alt="连接失败" id="pic1"></li>
<li><img src="03.jpg" alt="连接失败" id="pic2"></li>
<li><img src="04.jpg" alt="连接失败" id="pic3"></li>
<li><img src="05.jpg" alt="连接失败" id="pic4"></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var imgbig = document.getElementById("big");
var pic = document.getElementById("pic");
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic3 = document.getElementById("pic3");
var pic4 = document.getElementById("pic4");
pic.onmouseover = function(){
imgbig.style.backgroundImage = "url(01big.jpg)"
}
pic1.onmouseover = function(){
imgbig.style.backgroundImage = "url(02big.jpg)"
}
pic2.onmouseover = function(){
imgbig.style.backgroundImage = "url(03big.jpg)"
}
pic3.onmouseover = function(){
imgbig.style.backgroundImage = "url(04big.jpg)"
}
pic4.onmouseover = function(){
imgbig.style.backgroundImage = "url(05big.jpg)"
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charse
阅读背景：
淘宝商品的页面详情展示里面的图片展示
来源：互联网
分享到：
