<frameset cols="20%,*">
<frame src="1.html" />
<frame src="2.html" />
</frameset>
1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function init(){
var p=document.getElementsByTagName("p")
for(var i=0i<p.lengthi++){
p[i].onclick=test
}
}
function test(){
var src=this.getAttribute("src")
var img=window.parent.frames[1].document.images[0]
img.setAttribute("src",src)
}
window.onload=init
</script>
</head>
<body>
<p src="1.jpg">test1</p>
<p src="2.jpg">test2</p>
</body>
</html>
2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="3.jpg" />
</body>
</html>
第一种方法：将三张大图放在div里面，这三个div大小还有别的属性都一样，但是默认是隐藏的，display：none；隐藏display：block；显示然后点击一张图片，对应的大图div显示出来，点击第二张，第一个大图div隐藏，第二个大图div显示。第二种方法，只有一个大的div，里面放<img>标签，但是src也就是路径是空的，然后当你点击第一个小图的时候，给这个img标签的src赋值，也就是第一个大图的路径，点击第二个，路径变更。第三种，去网上找找这样的源代码，图片轮转。好多源代码 各种样式的都有。希望能帮助到你结合js比较简单些。为你做了个简单的参考下<html>
<head>
<style>
#container{position:relativeheight:200pxwidth:300pxborder:1px solid red}
#inss{position:absoluteheight:30pxwidth:300pxborder:1px solid greenbottom:0px}
</style>
<script>
function xianshi(){document.getElementById("inss").style.display="block"}
function yincang(){document.getElementById("inss").style.display="none"}
</script>
<head>
<body>
div代码：
<div id="container" onmouseover="xianshi()" onmouseout="yincang()">
<div id="inss">遮罩层</div>
</div>
</body>
</html>
你需要做的就是给遮罩层的图片价格透明度的背景图片。效果就出来了！
