实现JS标签切换效果【CSS图片切换】
运行代码尝试，我把整篇的CSS文件内容都弄上来了，难得去找具体内容了，反正能得到效果就可以了。
代码
<!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=gb2312" />
<title>JS实现标签切换效果 </title>
</head>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
body{
font-size: 12px;
font-family:Arial;
color:#000;
background:#fff url(body.gif) top repeat-x;
text-align:center;
height:843px;
}
#wrapper {
width:1024px;
padding:0px;
margin: 0px auto;
text-align:left;
height:180px;
}
#wrappertion{
width:1024px;
height:123px;
padding-left:200px;
}
#header {
height:180px;
overflow:hidden;
color: #f4e9d3;
width:100%;
float:left;
}
#headtop {
height:13px;
margin: 0 auto;
}
#mainWrapper {
width:800px;
margin:0 auto;
clear:both;
}
#websiteLogo {
float: left;
margin:7px 5px;
width:200px;
height:161px;
}
#head_r{
float:left;
margin-right:0px;
width:750px;
}
#zhongjian{
width:750px;
height:110px;
margin-left: 0px;
}
.logo {
width:161px;
height:146px;
overflow:hidden;
}
#kouhao{
width:450px;
float:left;
margin-left:15px;
margin-top:40px;
}
#dianhua{
float:right;
margin-top:9px;
}
#shoucang{
float:right;
}
#shoucang a{
font-size:12px;
color:#FF9900;
text-decoration:none;
}
#daohang{
font-size:14px;
color:#FFCC00;
}
#footer{
height:80px;
width:1024px;
}
#foot_l{
height:60px;
width: 80px;
padding-top:5px;
float:left;
display:inline;
}
#foot_l img{
float:righr;
}
#copyriht{
width:680px;
height:40px;
font-family:"黑体";
color:#FFFFFF;
float:left;
margin-top:30px;
margin-left:5px;
}
#copyright .cp_a{
}
#copyright .cp_b{
}
#bottMenu{
margin:0 20px;
height:20px;
width:500px;
text-align:center
}
#bottMenu li{
height:15px;
list-style:none;
float:left;
margin:2px 5px;
}
#bottMenu li a{
text-decoration:none;
color:#FFFFFF;
font-size:12px;
}
#content{
height:540px;
width:1024px;
padding:0px;
margin: 0 auto;
text-align:left;
}
#topmenu{
height:50px;
width:777px;
}
#main{
height:500px;
width:400px;
padding:0px;
margin: 0px auto;
float:left;
}
.pic{
height:300px;
}
.pic_a{
margin-left:20px;
}
.pic_b{
margin-left:60px;
margin-top:20px;
}
.pic_c{
margin-left:100px;
margin-top:20px;
}
.scroll_main{
height:100px;
width:399px;
margin-top:20px;
}
.scroll_a{
background-image:url(pic6.gif);
background-position:400px;
}
#xnav{
width:600px;
height:500px;
float:left;
background-color:#D09511;
}
#xnav_pp
{
width:600px;
height:205px;
padding-bottom:0px;
}
#back_zs{
width:230px;
height:195px;
background-image:url(pic_zs.gif);
float:left;
}
#back_zs_t{
height:165px;
width:227px;
margin-top:30px;
}
#xnav_z{
height:205px;
width:282px;
float:left;
margin:0px auto;
}
#dnav{
width:315px;
margin-right:0;
padding-top:5px;
padding-bottom:0px;
height:195px;
}
#subnav{
float:left;
width:85px;
height:195px;
background-image:url(pic9.gif);
}
.s1{display:block;}
.s2{display:none;}
.subnav_ms{
width:80px;
height:37px;
float:left;
}
.subnav_ms img{
margin:12px 0 0 12px;
}
.subnav_hb{
width:80px;
height:37px;
float:left;
}
.subnav_hb img{
margin:15px 0 0 12px;
}
.subnav_yh{
width:80px;
height:37px;
float:left;
}
.subnav_yh img{
margin:15px 0 0 12px;
}
.subnav_hy{
width:80px;
height:37px;
float:left;
}
.subnav_hy img{
margin:15px 0 0 12px;
}
.subnav_cl{
width:80px;
height:37px;
float:left;
}
.subnav_cl img{
margin:17px 0 0 26px;
}
#back_news{
background-color:#922424;
height:30px;
margin-top:10px;
margin-left:5px;
border-top-style:double;
border-bottom-style:double;
border-color:#CEA677;
size:12px;
}
#back_size{
font-size:15px;
color:#FFFFFF;
padding:5px 0 5px 35px;
}
#column{
height:300px;
width:600px;
}
#column_z{
height:300px;
}
#column_size{
font-size:15px;
color:#FFFFFF;
padding:5px 0 5px 35px;
margin-top:0;
}
#column_cy
{
background-color:#922424;
height:30px;
margin-left:5px;
border-top-style:double;
border-bottom-style:double;
border-color:#CEA677;
size:12px;
}
#column_news
{
width:600px;
height:200px;
background-image:url(11.gif);
padding-top:60px;
padding-left: 11px;
}
.huiyi{
width:200px;
height:200px;
float: left;
}
.picg_a{
width: 168px;
height: 100px;
float: left;
margin-left:4px;
}
.picg_b{
width: 168px;
height: 100px;
float: left;
margin-left:5px;
}
.picg_c{
width: 168px;
height: 100px;
float: left;
margin-left:5px;
}
.canyin{
width:200px;
height:200px;
float: left;
}
.chalou{
width:200px;
height:200px;
float: left;
}
.ab_content{
height:100px;
width:155px;
float:left;
margin:12px 0 0 12px;
}
.ab_content a{
color:#775203;
text-decoration:none;
font-family:"宋体";
}
</style>
<body>
<div id="xnav">
<div id="xnav_pp">
<div id="xnav_z">
<div id="back_news">
<div id="back_size"> </div>
</div>
<div id="news"></div>
</div>
<div id="dnav">
<div id="back_zs">
<div id="back_zs_t">
<div id="Info_11" class="s1"><img src="http://a3.att.hudong.com/07/76/01200000033329115477630530907.jpg" height="160px" width="227px"/></div>
<div id="Info_12" class="s2"><img src="http://cimg2.163.com/catchimg/20100225/7ONQ2K7N_1.jpg" height="160px" width="227px"/></div>
<div id="Info_13" class="s2"><img src="http://www.feizl.com/upload2007/2008_11/08112419218785.jpg" height="160px" width="227px"/></div>
<div id="Info_14" class="s2"><img src="http://img.bimg.126.net/photo/OKHq2WTgFfUw7O0-3H6u0Q==/5128192600692022719.jpg" height="160px" width="227px"/></div>
<div id="Info_15" class="s2"><img src="http://games.qq.com/images/netgame/2008/07/18/addie/s/16.jpg" height="160px" width="227px"/></div>
</div>
</div>
<div id="subnav" onmouseover="this.calssName='subnav'" >
<div id="channel11" class="subnav_ms" onmouseover="ChangeChannel(1,1);">1111111</div>
<div id="channel12" class="subnav_ms" onmouseover="ChangeChannel(1,2);">22222222</div>
<div id="channel13" class="subnav_ms" onmouseover="ChangeChannel(1,3);" >33333333</div>
<div id="channel14" class="subnav_ms" onmouseover="ChangeChannel(1,4);">444444444</div>
<div id="channel15" class="subnav_ms" onmouseover="ChangeChannel(1,5);">6666666</div>
</div>
</div>
</div>
</div>
<script type=text/javascript>
//获取对象名称函数
//
function getObj(objName){return(document.getElementById(objName));}
</script>
<script type=text/javascript>
var num2=5;
function ChangeChannel(module,orderid){
for(var i=1;i<=num2;i++)
{
getObj("Channel"+module+i).className="subnav_ms";
if (orderid>1)
{
getObj("Channel"+module+1).className="subnav_ms";
}
if (orderid<5)
{
Tempid=orderid+1
getObj("Channel"+module+Tempid).className="subnav_ms";
}
getObj("Info_"+module+i).className="s2";
}
getObj("Channel"+module+orderid).className="subnav_ms";
getObj("Info_"+module+orderid).className="s1";
}
</script>
</body>
</html>
