<!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/html; charset=utf-8" />
<title>滑动门</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ overflow:hidden; }
.box{ width:980px; height:255px; margin:0 auto; }
.pic1{ width:auto; height:auto; position: absolute;top: 0px;}
.pic2{width:auto;height:auto;position: absolute;top: 0px;}
.pic3{width:auto;height:auto;position: absolute;top: 0px;}
.bottom{width:980px;height:35px;background-position: center bottom;filter: Alpha(Opacity=50);background-color: #000000;position: absolute;top: 215px;}
.bottom ul { margin:0; padding:0;}
.bottom li{ float:left; width:245px; height:35px; font-size:14px; font-weight:bold; display:block; color:#FFFFFF; text-align:center; list-style-type:none; line-height:40px;}
.bottom li.change {background:#fff;cursor:default; color:#333; display:block;}
</style>
<script>
function show(obj)
{
var id=obj.id;
for(var i=1;i<4;i++)
{
var li=document.getElementById(i);
if(li.id==id)
{
li.className="change";
}
else
{
li.className="";
}
var divId="div"+i;
if(divId=="div"+id)
{
document.getElementById(divId).style.display="block";
}
else
{
document.getElementById(divId).style.display="none";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="pic1" id="div1" name="byNames" ><img src="02.jpg" /></div>
<div class="pic2" id="div2" name="byNames" ><img src="03.jpg" /></div>
<div class="pic3" id="div3" name="byNames" ><img src="04.jpg" border="0" /></div>
<div class="bottom">
<ul>
<a href="#"><li id="1" class="change" onmouseover="show(this)" style="cursor:pointer">轻松购物</li> </a>
<a href="#"><li id="2" onmouseover="show(this)" style="cursor:pointer" >生活支付</li></a>
<a href="#"><li id="3" onmouseover="show(this)" style="cursor:pointer">多种支付方式</li></a>
</ul>
</div>
</div>
</body>
</html>
