测试一下

程度上

#rank{ height: 307px; width: 222px; padding: 45px 12px 12px; background: #fdeff5 url(../p_w_picpaths/default/rank_logo.gif) no-repeat; float: left; position: relative;}
#rank .tab a{ position: absolute; display: block; width: 69px; height: 26px; font-size: 14px; font-weight: bold; line-height: 24px; text-align: center; cursor: pointer}
#rank .tab a.on{ background: #fff url(../p_w_picpaths/default/rank_tab_on.gif) no-repeat; padding: 3px 0 2px; color: #ff75a6; text-decoration: underline;}
#rank .tab a.off{ background: #ff75a6 url(../p_w_picpaths/default/rank_tab_off.gif) no-repeat; padding: 5px 0 0; color: #fff; text-decoration: none;}
#rank ul{ border: solid 1px #ff5994; background: #fff; padding: 7px 5px 5px; line-height: 20px; text-align: right; position: absolute; left: 12px; top: 45px; width: 210px;}
#rank ul li{ background: url(../p_w_picpaths/default/bg_li_15.gif) no-repeat 0 2px;}
#rank ul li a{ float: left; margin-left: 25px;}
#rank ul li a:link,#rank ul li a:visited{ color: #000;}
#rank ul li a:hover,#rank ul li a:active{ color: #ff397f; text-decoration: underline;}
#rank ul .l01{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_01.gif); font-weight: bold;}
#rank ul .l02{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_02.gif); font-weight: bold;}
#rank ul .l03{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_03.gif); font-weight: bold;}
#rank ul .l04{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_04.gif);}
#rank ul .l05{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_05.gif);}
#rank ul .l06{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_06.gif);}
#rank ul .l07{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_07.gif);}
#rank ul .l08{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_08.gif);}
#rank ul .l09{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_09.gif);}
#rank ul .l10{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_10.gif);}
#rank ul .l11{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_11.gif);}
#rank ul .l12{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_12.gif);}
#rank ul .l13{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_13.gif);}
#rank ul .l14{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_14.gif);}
#rank ul .l15{ background-p_w_picpath: url(../p_w_picpaths/default/bg_li_15.gif);}

#featured{ border: solid 1px #b0b0b0; margin-top: 8px; position: relative; padding: 10px 5px 6px;}
#featured .title{ width: 454px; height: 18px; background: #fff url(../p_w_picpaths/default/fea_title.gif) no-repeat 9px 0; position: absolute; left: 5px; top: -8px;}
#featured .picture{ background: green; width: 462px; height: 205px; position: relative;}
#bimg{ filter: progid:DXImageTransform.Microsoft.Fade(duration=0.5,overlap=1.0);}
#bimg img{ width: 462px; height: 205px; overflow: hidden;}
#simg{ background: blue;}
#simg div{ width: 17px; height: 17px; position: absolute;}
#simg div.s{ width: 20px; height: 20px;}
#simg #div1{ background: url(../p_w_picpaths/default/fea_no_1.gif);}
#simg #div1.s{ background: url(../p_w_picpaths/default/fea_no_1_on.gif);}
#simg #div2{ background: url(../p_w_picpaths/default/fea_no_2.gif);}
#simg #div2.s{ background: url(../p_w_picpaths/default/fea_no_2_on.gif);}
#simg #div3{ background: url(../p_w_picpaths/default/fea_no_3.gif);}
#simg #div3.s{ background: url(../p_w_picpaths/default/fea_no_4_on.gif);}
#simg #div4{ background: url(../p_w_picpaths/default/fea_no_4.gif);}
#simg #div4.s{ background: url(../p_w_picpaths/default/fea_no_4_on.gif);}

#news{ margin-top: 6px;}
#news h2{ color: #ff6398; line-height: 22px; padding-left: 16px; background: url(../p_w_picpaths/common/bg_dot_red.gif) no-repeat 0 5px;}
#news ul{ padding: 3px 6px 3px; background: #f8f8f8; overflow: hidden; clear: both; height: 100px;}
#news ul li{ width: 50%; float: left; color: #f00; height: 20px; overflow: hidden; line-height: 20px;}
#news ul li a{ color: #000;}
#news ul li img{ display: inline; margin: 0 !important; margin: 3px 0 0;}
#news ul a{ margin-left: 4px;}
#news img.m{ float: right; margin: 5px 0 0;}

 

<!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>
        <title>首页修改稿</title>
        <link href="css/common.css" rel="stylesheet" type="text/css" />
        <link href="css/default1.css" rel="stylesheet" type="text/css" />

        <script src="js/tabs.js" type="text/javascript"></script>

        <script language="javascript" type="text/javascript">

                function getid(obj)//取对应id的元素
                {
                    return document.getElementById(obj);
                }

         function getNames(obj,name,tij)//取obj元素下标签为tij的元素并要求满足name属性=name;返回一个数组
         {    
            var p = getid(obj);
            var plist = p.getElementsByTagName(tij);
            var rlist = new Array();
            for(i=0;i<plist.length;i++)
            {
             if(plist[i].getAttribute("name") == name)
             {
                rlist[rlist.length] = plist[i];
             }
            }
            return rlist;
         }

         function ri(obj)//取得对应的小图列表中当前元素对应的序号
         {
            var p = getid("simg").getElementsByTagName("div");
            for(i=0;i<p.length;i++)
            {
             if(obj == p[i])
             {
                return i;
             }
            }
         }

         function ci(obj)//小图选择框的处理函数
         {
            var p = getid("simg").getElementsByTagName("div");
            for(i=0;i<p.length;i++)
            {
             if(obj ==p[i])
             {
                p[i].className = "s";
             }
             else
             {
                p[i].className = "";
             }
            }
         }
         function fiterplay(obj,num,t,name)//类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id    name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素的序号
         {
            var fitlist = getNames(obj,name,t);
            for(i=0;i<fitlist.length;i++)
            {

             if(i == num)
             {
                fitlist[i].className = "dis";
             }
             else
             {
                fitlist[i].className = "undis";
             }
            }
         }
         function play(obj,n1)//播放的函数
         {
            var p = obj.parentNode.getElementsByTagName("div");
            var bimg = getid(n1);
            var num = ri(obj);
            try  //ie下的处理部分
            {
             with(bimg)
             {
                filters[0].Apply();  //接收滤镜
                ci(obj); //变幻小图的选择.可以放在try以外.
                fiterplay(n1,num,"div","f");//设置滤镜中对应部分的显示和隐藏
                filters[0].play();  //播放滤镜
             }
            }
            catch(e)//ff下的处理部分
            {
                ci(obj);
                fiterplay(n1,num,"div","f");
            }
         }
                var n=0;
                function clearAuto() {clearInterval(autoStart);};
                function setAuto(){autoStart=setInterval("auto(n)", 5000)}
                function auto()
                {
                 var x = getid("simg").getElementsByTagName("div");
                 n++;
                 if(n>3)n=0;
                 play(x[n],"bimg","imginfo");
                }    

                setAuto();

        </script>

</head>
<body>
        <div id="main">
                <div class="row">
                        <div id="rank">
                                <div id="ranklist">
                                        <ul name="f" class="dis" id="ranklist_1">
                                                <li class="l01"><a href="html/zhuanti/1912.htm" target="_blank">妙妙双胞胎1</a>郭妮 </li>
                                                <li class="l02"><a href="html/jingpin/mmsbt.htm" target="_blank">OK！主人阁下1</a>水水 </li>
                                                <li class="l03"><a href="html/jingpin/okzrgx.htm" target="_blank">OK！主人阁下1</a>易拉罐 </li>
                                                <li class="l04"><a href="html/jingpin/pdldyl2.htm" target="_blank">潘多拉的眼泪2</a>胡伟红</li>
                                                <li class="l05"><a href="html/zhuanti/zjsfs3.htm" target="_blank">再见，苏菲斯3</a>郭妮</li>
                                                <li class="l06"><a href="html/jingpin/njxl.htm" target="_blank">柠静夏恋</a>王晓虹</li>
                                                <li class="l07"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l08"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                                <li class="l09"><a href="html/zhuanti/xtlas.htm" target="_blank">心跳恋爱社</a>郭妮</li>
                                                <li class="l10"><a href="html/jingpin/blhgn.htm" target="_blank">玻璃灰姑娘</a>池小凡</li>
                                                <li class="l11"><a href="html/jingpin/txtsdlamz.htm" target="_blank">脱线天使的恋爱魔咒</a>哇卡卡</li>
                                                <li class="l12"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l13"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                                <li class="l14"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l15"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                        </ul>
                                        <ul name="f" class="undis" id="ranklist_2">
                                                <li class="l01"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l02"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                                <li class="l03"><a href="html/zhuanti/1912.htm" target="_blank">1王9帅12宫</a>郭妮 </li>
                                                <li class="l04"><a href="html/jingpin/mmsbt.htm" target="_blank">妙妙双胞胎1</a>水水 </li>
                                                <li class="l05"><a href="html/jingpin/okzrgx.htm" target="_blank">OK！主人阁下1</a>易拉罐 </li>
                                                <li class="l06"><a href="html/jingpin/pdldyl2.htm" target="_blank">潘多拉的眼泪2</a>胡伟红</li>
                                                <li class="l07"><a href="html/zhuanti/zjsfs3.htm" target="_blank">再见，苏菲斯3</a>郭妮</li>
                                                <li class="l08"><a href="html/jingpin/njxl.htm" target="_blank">柠静夏恋</a>王晓虹</li>
                                                <li class="l09"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l10"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                                <li class="l11"><a href="html/zhuanti/xtlas.htm" target="_blank">心跳恋爱社</a>郭妮</li>
                                                <li class="l12"><a href="html/jingpin/blhgn.htm" target="_blank">玻璃灰姑娘</a>池小凡</li>
                                                <li class="l13"><a href="html/jingpin/txtsdlamz.htm" target="_blank">脱线天使的恋爱魔咒</a>哇卡卡</li>
                                                <li class="l14"><a href="html/jingpin/hslwq.htm" target="_blank">红色轮舞曲</a>糖不甜 </li>
                                                <li class="l15"><a href="html/jingpin/jyqy2.htm" target="_blank">倦夜千羽2</a>风念南 </li>
                                        </ul>
                                </div>
                                <div class="tab">
                                        <a οnclick="fod(this,'ranklist');" class="on" style="left: 96px; top: 15px;">畅销排行</a><a
                                                οnclick="fod(this,'ranklist');" class="off" style="left: 165px; top: 15px;">新书推荐</a>
                                </div>
                        </div>
                        <div class="left w474 ml8">
                                <div id="featured">
                                        <div class="title">
                                        </div>
                                        <div class="picture">
                                                <div id="bimg">
                                                        <div class="dis" name="f">
                                                                <a href="html/zhuanti/5yuan.htm" target="_blank">
                                                                        <img src="p_w_picpaths/default/picture1.jpg" alt="买就送5元当场抵扣" /></a>
                                                        </div>
                                                        <div class="undis" name="f">
                                                                <a href="html/zhuanti/fyzs.htm" target="_blank">
                                                                        <img src="p_w_picpaths/default/picture2.jpg" alt="封印之书·镜之门" /></a>
                                                        </div>
                                                        <div class="undis" name="f">
                                                                <a href="html/zhuanti/hzg.htm" target="_blank">
                                                                        <img src="p_w_picpaths/default/picture3.jpg" alt="花之国" /></a>
                                                        </div>
                                                        <div class="undis" name="f">
                                                                <a href="html/zhuanti/fyzs.htm" target="_blank">
                                                                        <img src="p_w_picpaths/default/picture2.jpg" alt="封印之书·镜之门" /></a>
                                                        </div>
                                                </div>
                                                <div id="simg">
                                                        <div id="div1" class="s" style="left: 0; bottom: 0;" οnmοuseοver="play(this,'bimg');clearAuto();"
                                                                οnmοuseοut="setAuto()">
                                                        </div>
                                                        <div id="div2" class="" style="left: 30px; bottom: 0;" οnmοuseοver="play(this,'bimg');clearAuto();"
                                                                οnmοuseοut="setAuto()">
                                                        </div>
                                                        <div id="div3" class="" style="left: 60px; bottom: 0;" οnmοuseοver="play(this,'bimg');clearAuto();"
                                                                οnmοuseοut="setAuto()">
                                                        </div>
                                                        <div id="div4" class="" style="left: 90px; bottom: 0;" οnmοuseοver="play(this,'bimg');clearAuto();"
                                                                οnmοuseοut="setAuto()">
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="button">
                                        </div>
                                </div>
                                <div id="news">
                                        <h2>
                                                <a href="http://bbs.joustar.com/showforum-46.aspx">
                                                        <img src="p_w_picpaths/common/more.gif" alt="点击查看更多新闻..." class="m" />
                                                </a>官方公告区
                                        </h2>
                                        <ul>
                                                <li><span>[新闻]</span><a href="http://bbs.joustar.com/showtopic-61807.aspx" title="《六月之兽Ⅰ》盛大开启"
                                                        target="_blank">《六月之兽Ⅰ》盛大开启</a></li>
                                                <li><span>[活动]</span><a href="JoustarSurveyForSpeed.htm" title="改善网站访问速度调查" target="_blank"><b>改善网站访问速度调查</b></a><img
                                                        src="p_w_picpaths/default/img_new.gif" alt="更新" /></li>
                                                <li><span>[新闻]</span><a href="http://bbs.joustar.com/showtopic-61806.aspx" title="宅男狂潮来袭，真人漫画首创新风"
                                                        target="_blank">宅男来袭，真人漫画首创新风</a></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/miduola.htm" title="米朵拉魅力打造最强穿越" target="_blank">米朵拉魅力打造最强穿越</a></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/tszyjss.htm" title="激奏！看特殊职业达人玩转青春" target="_blank">激奏！看特殊职业达人玩转青春</a></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/zaznls.htm" title="《早安！宅男老师》活力报到" target="_blank">《早安！宅男老师》活力报到</a></li>
                                                <li><span>[活动]</span><a href="JoustarSurvey2008.htm" title="聚星天华2008读者调查问卷" target="_blank"><b>聚星天华2008读者调查问卷</b></a><img
                                                        src="p_w_picpaths/default/img_new.gif" alt="更新" /></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/qinghan.htm" title="轻寒华美登场，新书火热上线" target="_blank">轻寒华美登场，新书火热上线</a></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/miduola.htm" title="米朵拉魅力打造最强穿越" target="_blank">米朵拉魅力打造最强穿越</a></li>
                                                <li><span>[新闻]</span><a href="html/zhuanti/tszyjss.htm" title="激奏！看特殊职业达人玩转青春" target="_blank">激奏！看特殊职业达人玩转青春</a></li>
                                        </ul>
                                </div>
                        </div>
                </div>
        </div>
</body>
</html>

转载于:https://blog.51cto.com/danielliu/122614