(求助)高手帮我看下！难道没人帮我吗？

beyondmc [楼主]

天堂的回音

初级会员

帖子: 70
体力: 154
威望: 0
当前: 天津南开
离线: 21 天

1^# 大中小发表于 2008-8-27 10:10

本来想实现这个效果：第一张图
结果把宽度和高度一调就成这个效果了第二张图
那位高手能告诉我那里调那个按钮啊能把按钮5调回同一行

附上JS代码和样式

复制内容到剪贴板

代码:

            var imgWidth=478;              //图片宽

            var imgHeight=194;             //图片高

            var textFromHeight=0;         //焦点字框高度 (单位为px)

            var textStyle="bt_link";           //焦点字class style (不是连接class)

            var textLinkStyle="FONT"; //焦点字连接class style

            var buttonLineOn="#ce0609";           //button下划线on的颜色

            var buttonLineOff="#9b9b9b";          //button下划线off的颜色

            var TimeOut=5000;              //每张图切换时间 (单位毫秒);

            var imgUrl=new Array(); 

            var imgLink=new Array();

            var imgtext=new Array();

            var imgAlt=new Array();

            var adNum=0;

            var theTimer=0;

            var tt=1;

            //焦点字框高度样式表 开始

            document.write('<style type="text/css">');

            document.write('#focuseFrom{width:'+(imgWidth+0)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');

            document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');

            document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+24)+'px;height:50px}');

            document.write('</style>');

            document.write('<div id="focuseFrom">');

            //焦点字框高度样式表 结束

            

                        

                        tt=1;

                        imgUrl[tt] ='http://www.pptiger.com/image/home/g4.jpg';

                        imgtext[tt]='&nbsp;虎讯IT、数码广场 隆重招商';

                        imgLink[tt]='http://www.pptiger.com';

                        imgAlt[tt]='虎讯IT、数码广场 隆重招商';

                        

                        tt=2;

                        imgUrl[tt] ='http://www.pptiger.com/image/home/g7.jpg';

                        imgtext[tt]='&nbsp;虎讯配送';

                        imgLink[tt]='http://www.pptiger.com';

                        imgAlt[tt]='虎讯配送';

                        

                        tt=3;

                        imgUrl[tt] ='http://www.pptiger.com/image/home/g5.jpg';

                        imgtext[tt]='&nbsp;以便捷的方式，为公众推荐可靠的商家，买到实惠的商品';

                        imgLink[tt]='http://www.pptiger.com';

                        imgAlt[tt]='以便捷的方式，为公众推荐可靠的商家，买到实惠的商品';

                        

                        tt=4;

                        imgUrl[tt] ='http://www.pptiger.com/image/home/g8.jpg';

                        imgtext[tt]='&nbsp;感受现场购物体验 实体商家在线交流 足不出户逛商场';

                        imgLink[tt]='http://www.pptiger.com';

                        imgAlt[tt]='感受现场购物体验 实体商家在线交流 足不出户逛商场';

                        

                        tt=5;

                        imgUrl[tt] ='http://www.pptiger.com/image/home/g6.jpg';

                        imgtext[tt]='&nbsp;真诚服务 以人为本';

                        imgLink[tt]='http://www.pptiger.com';

                        imgAlt[tt]='真诚服务 以人为本';

                        

            

            var intPage =0;

            for (var i=1;i<=imgUrl.length;i++)

            {

                if (imgUrl[i]!="!!!")

                {

                    intPage++;

                }

            }

            function changeimg(n)

            {

                adNum=n;

                window.clearInterval(theTimer);

                adNum=adNum-1;

                nextAd();

            }

            function goUrl(){

            window.open(imgLink[adNum],'_blank');

            }

            //NetScape开始

            if (navigator.appName == "Netscape")

            {

            document.write('<style type="text/css">');

            document.write('.buttonDiv{height:4px;width:21px;}');

            document.write('</style>');

            function nextAd(){

                if(adNum<(intPage-1))adNum++;

                else adNum=1;

                theTimer=setTimeout("nextAd()", TimeOut);

                document.images.imgInit.src=imgUrl[adNum];

                document.images.imgInit.alt=imgAlt[adNum];    

                document.getElementById('focustext').innerHTML=imgtext[adNum];

                document.getElementById('link'+adNum).style.background=buttonLineOn;

                document.getElementById('imgLink').href=imgLink[adNum];

                for (var i=1;i<=intPage;i++)

                {

                   if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}

                }    

            }

                document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="imgUrl[1]" name="imgInit" border=1 alt="'+imgAlt[1]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>')

                document.write('<div id="imgTitle">');

                document.write('<div id="imgTitle_down">');

            //数字按钮代码开始

            for(var i=1;i<intPage;i++){document.write('<a href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'">'+i+'</a>');}

            //数字按钮代码结束

                document.write('</div>');

                document.write('</div>');

                document.write('</div>');

                nextAd();

            }

            //NetScape结束

            //IE开始

            else

            {

            var count=0;

            for (i=1;i<intPage;i++) {

                if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {

                    count++;

                } else {

                    break;

                }

            }

            function playTran(){

                if (document.all)

                    document.images.imgInit.filters.BlendTrans.play();        

            }

            var key=0;

            function nextAd(){

                if(adNum<count)adNum++ ;

                else adNum=1;

                

                if( key==0 ){

                    key=1;

                } else if (document.all){

                    //imgInit.filters.revealTrans.Transition=6;

                    document.images.imgInit.filters.BlendTrans.apply();

                       playTran();

                }

                document.images.imgInit.src= imgUrl[adNum];

                document.images.imgInit.alt=imgAlt[adNum];    

                document.getElementById('link'+adNum).style.background=buttonLineOn;

                for (var i=1;i<=count;i++)

                {

                   if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}

                }    

                focustext.innerHTML=imgtext[adNum];

                //links_ie_font.links=imglink[adNum];

                theTimer=setTimeout("nextAd()", TimeOut);

            }

            document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: BlendTrans ( duration=1 );" src="javascript:nextAd()" border=0 vspace="0" name=imgInit class="imgClass"></a>');

            document.write('<div id="txtFrom"><a target=_self href="javascript:goUrl()"><span id="focustext" class="'+textStyle+'"></span></a></div>');

            document.write('<div id="imgTitle">');

            document.write(' <div id="imgTitle_down"> <a class="trans"" style="float:left"><img width="420" src="http://www.pptiger.com//image/trans.gif" border=0></a>');

            //数字按钮代码开始

            for(var i=1;i<intPage;i++){document.write('<a id="link'+i+'"  href="javascript:changeimg('+i+')" class="button" style="cursor:hand" title="'+imgAlt[i]+'" onFocus="this.blur()">'+i+'</a>');}

            //数字按钮代码结束

            document.write('</div>');

            document.write('</div>');

            document.write('</div>');

changeimg(1);

            }

            //IE结束

样式：

复制内容到剪贴板

代码:

/*焦点图切换*/

#f_div{width:325px; height:225px; margin:0 auto; overflow:hidden;}

#f_imgDiv{width:100%; height:225px; overflow:hidden;}

#f_img{filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); border:0;}

#f_infoDiv{width:16px;top:-115px; left:305px; height:120px; position:relative;}

#f_buttonDiv{width:12px; height:160px; overflow:hidden; text-align:left;}

#f_buttonDiv div{width:1px;height:7px; overflow:hidden;}

#f_buttonDiv .bg{width:12px; height:12px; background:#666; float:right; filter:Alpha(Opacity=40); overflow:hidden;}

#f_buttonDiv a{width:12px;height:12px;line-height:13px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:10px;text-align:center;display:block;overflow:hidden;text-decoration:none;position:absolute;}

#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#FFF;}

#f_buttonDiv a:hover{background:#DE97B7;color:#fff;}

#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#D285A7;}

#f_buttonDiv a.on:hover{background:#DE97B7;}

#f_text{height:26px; line-height:26px; overflow:hidden;text-align:left; font-weight:bold; background:url(http://www.pclady.com.cn/images/07/jt7.gif) no-repeat 10px 8px; text-indent:20px;}

#f_text a:link,#f_text a:visited,#f_text a:active{color:#000;text-decoration: none;}

#f_text a:hover{color:#FF6600;text-decoration: none;}

body {background: #fff;margin: 0px; font-size:12px;}

.f14 {font-size:14px;}

a:link,a:visited{color:#5f5f5f;text-decoration: none;}

a:active{color:#5f5f5f;}

a:hover{ color:#FF6600;text-decoration: none;}

.white a:link,.white a:visited,.white a:active{color:#FFFFFF;text-decoration: none;}

.white a:hover{ color:#FFFFFF;text-decoration: none;}

.white2,.white2 a:link,.white2 a:visited,.white2 a:active{color:#FFF;text-decoration: none;}

.white2 a:hover{ color:#000;text-decoration: none;}

.gray2,.gray2 a:link,.gray2 a:visited,.gray2 a:active{color:#000;text-decoration: none;}

.gray2 a:hover{ color:#E64393;text-decoration: none;}

.green,.green a:link,.green a:visited,.green a:active{color:#008100;text-decoration: none;}

.green a:hover{ color:#E64393;text-decoration: none;}

#body1_1_1 {float: left;width: 333px;background-color: #F1F1F1;    border-left: #D4D4D4 solid 2px;}

#body1_1_1_a {height: 226px;width: 325px;margin: 4px 0 0 4px;}

 

/*--------------------------------------------*/

/* 数字按钮框样式 */

            #imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;}

            #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; }

            #imgTitle_down {left:0px;text-align: right; width:inherit; height:25px;}

            /* 图片框样式 */

            .imgClass { width:478px; height:194px; }

            /* 图片文字框样式 */

            #txtFrom {text-align: center;vertical-align: middle; color:#333333}

            /* 数字按钮样式 */

            .button {text-decoration: none; float:left; height:15px; line-height:12px; padding-left:7px; padding-right:6px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}

            a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}

            a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; }

            .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center;    vertical-align: middle;}

            /*渐变*/ 

            .trans { width:390px; height:15px; overflow:hidden}

[ 本帖最后由 beyondmc 于 2008-8-27 11:44 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

天堂有摇滚

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

‹‹ 上一主题 | 下一主题 ››