效果有问题

clickAlex 2009-05-04 09:28:00

像普通网站一样首页上有个图片框下边有1-5的数字鼠标放在1上就显示1的图片放在2上就显示2的图片……等等
请问怎样实现？？用的是什么技术？？多谢！！

...全文

69 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

ssnhjt 2009-05-05

打赏
举报

楼上的很对，用 js 完全可以实现，就像以前迅雷上做的差不多

pt1314917 2009-05-04

打赏
举报

<html>

<head>

<title>首页大图</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style type="text/css">

/* 数字按钮框样式 */

#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; }

/* 图片框样式 */

.imgClass {border: 0px solid #000;}

/* 图片文字框样式 */

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

/* 数字按钮样式 */

.button {text-decoration: none;font: bold 9px sans-serif; color:#FFFFFF; width:19px; height:15px; padding:2px 7px; background:url("images/dian_1.gif") center; }

/*渐变 

.trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}

*/

</style>

</head>

<body background="./flash-bgh_3.jpg">

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

var imgWidth=399;              //图片宽

var imgHeight=245;             //图片高

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

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

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

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

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

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

var imgUrl=new Array(); 

var imgLink=new Array();

var imgtext=new Array();

var imgAlt=new Array();

var adNum=0;

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

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

document.write('#focuseFrom{width:'+(imgWidth+2)+';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+imgHeight-20)+'px;height:18px}');

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

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

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





imgUrl[1]='images/jipiaoyi.gif';

imgLink[1]='https://www.tenpay.com/';

imgAlt[1]='出行尽享“机票易”,轻松购票送好礼!';



imgUrl[2]='images/wangfu.gif';

imgLink[2]='/MemberCenter/IWantToExchange2.aspx';

imgAlt[2]='网上支付，双倍积分';







imgUrl[3]='images/100.jpg';

imgLink[3]='images/rh100q.html';

imgAlt[3]='100强';



function changeimg(n)

{

	adNum=n;

	window.clearInterval(theTimer);

	adNum=adNum-1;

	nextAd();

}

function goUrl(){

    if(imgLink[adNum]!="#")

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

}

//NetScape开始

if (navigator.appName == "Netscape")

{

function nextAd(){

	if(adNum<(imgUrl.length-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('imgLink').href=imgLink[adNum];



}

	document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' 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<imgUrl.length;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<imgUrl.length;i++) {

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

		count++;

	} else {

		break;

	}

}

function playTran(){

	if (document.all)

		imgInit.filters.revealTrans.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;

		imgInit.filters.revealTrans.apply();

                   playTran();

    }

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

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

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

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

	{

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

	}	

    focustext.innerHTML=imgtext[adNum];

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

}

document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" width='+imgWidth+' height='+imgHeight+' border=0 vspace="0" name=imgInit class="imgClass"></a>');

document.write('<div id="txtFrom"><span id="focustext" class="'+textStyle+'"></span></div>');

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

document.write(' <div id="imgTitle_down"> <a class="trans"></a>');

//数字按钮代码开始

for(var i=1;i<imgUrl.length;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>');

}

//IE结束

</script>

</body>

</html>