天天看点

javascript的图片切换效果

javascript的图片切换效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>?剧?????㈡????</title>

</head>

<body>

<table align="center" width="400">

<tr>

<td>

<table width="100%">

<tr>

<td colspan="6">

<font size="+2">

<div id="b2bContent" style="filter:revealTrans(Duration=1,Transition=23);width:100%;height:200px;"></div></font>

</td>

</tr>

<tr>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt0" onClick="javascript:showPage(0);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">1</div></font></td>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt1" onClick="javascript:showPage(1);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">2</div></font></td>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt2" onClick="javascript:showPage(2);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">3</div></font></td>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt3" onClick="javascript:showPage(3);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">4</div></font></td>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt4" onClick="javascript:showPage(4);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">5</div></font></td>

<td align="center" style="cursor:hand"><font size="+2"><div class="b2bbutton" id="bt5" onClick="javascript:showPage(5);clearTimeout(theTimer);theTimer=setTimeout('turnPage()',speed);checkBt();">6</div></font></td>

</tr>

</table>

<script language="javascript">

<!--

b2bStr=new Array();

b2bStr[0]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx1.jpg target=_blank><img src=cx1.jpg width=400px height=200px ;

b2bStr[1]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx2.jpg target=_blank><img src=cx2.jpg width=400px height=200px ;

b2bStr[2]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx3.jpg target=_blank><img src=cx3.jpg width=400px height=200px ;

b2bStr[3]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx4.jpg target=_blank><img src=cx4.jpg width=400px height=200px ;

b2bStr[4]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx5.jpg target=_blank><img src=cx5.jpg width=400px height=200px ;

b2bStr[5]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx5.jpg target=_blank><img src=cx5.jpg width=400px height=200px ;

var page=0;

var speed=3000;

function showPage(id){

page=id;

setTransition();

b2bContent.innerHTML=b2bStr[id];

b2bContent.filters.revealTrans.play();

}

function turnPage(){

showPage(page);

theTimer=setTimeout("turnPage()",speed);

checkBt();

page++;

if(page>=6) page=0;

}

function checkBt(){

for(var i=0;i<6;i++){

btObj=eval('bt'+i);

if(page==1){btObj.style.color='#FFFFFF';btObj.style.backgroundColor='#FF781C';}

else{btObj.style.color='#000000';btObj.style.backgroundColor='#F7F7F7';}

}

}

function setTransition(){

b2bContent.filters.revealTrans.Transition=Math.round(Math.random()*23);

b2bContent.filters.revealTrans.apply();

}

turnPage();

//-->

</script>

</td>

</tr>

</table>

</body>

</html>

继续阅读