您的位置：首页 > Web前端 > JavaScript

javascript的图片切换效果

2011-07-22 22:31 375 查看

<!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 border=0></a><br><a target=_blank title=cx1 href=cx1.jpg></a></div>";
b2bStr[1]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx2.jpg target=_blank><img src=cx2.jpg width=400px height=200px border=0></a><br><a target=_blank title=cx2 href=cx2.jpg></a></div>";
b2bStr[2]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx3.jpg target=_blank><img src=cx3.jpg width=400px height=200px border=0></a><br><a target=_blank title=cx3 href=cx3.jpg></a></div>";
b2bStr[3]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx4.jpg target=_blank><img src=cx4.jpg width=400px height=200px border=0></a><br><a target=_blank title=cx4 href=cx4.jpg></a></div>";
b2bStr[4]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx5.jpg target=_blank><img src=cx5.jpg width=400px height=200px border=0></a><br><a target=_blank title=cx5 href=cx5.jpg></a></div>";
b2bStr[5]="<div style='float:left;width:100%;overflow:hidden;'><a href=cx5.jpg target=_blank><img src=cx5.jpg width=400px height=200px border=0></a><br><a target=_blank title=cx5 href=cx5.jpg></a></div>";
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript border div bt float class
相关文章推荐
新的分享
章节导航