以下是 八屏动态焦点图代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>234234</title>
<style type="text/css">
body{text-align:center;}
td{font-size:12px}
.pdboder{BORDER-LEFT: #ffffff 1px solid}
.title{
word-break:break-all;
word-wrap:break-word;
layout-flow:vertical-ideographic;
color:#ffffff;
font-size:12px;
cursor:hand;
font-weight:bold;
text-align:center;TEXT-DECORATION: none}
.title A:link {COLOR: #ffffff; TEXT-DECORATION: none}
.title A:visited {COLOR: #ffffff; TEXT-DECORATION: none}
.title A:hover {COLOR: #ffffff; TEXT-DECORATION: none}
.title A:active {COLOR: #ffffff; TEXT-DECORATION: none}
.title1 {word-break:break-all;
word-wrap:break-word;
layout-flow:vertical-ideographic;
color:#ffffff;
font-size:12px;
cursor:hand;
font-weight:bold;
text-align:center;TEXT-DECORATION: none}
</style>
</head>
<body>
<table width="493" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="279"><div id=divhl01>
<div><a href="#" target="_blank"><img src="images/ad-01.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" onMouseOver="content_mouse(1)" valign="top" bgcolor="#FE8E0A" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">壹 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl02 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-02.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" onMouseOver="content_mouse(2)" valign="top" bgcolor="#FA5886" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">貮 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl03 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-03.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" valign="top" onMouseOver="content_mouse(3)" bgcolor="#ED3FBA" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">叁 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl04 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-04.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" valign="top" onMouseOver="content_mouse(4)" bgcolor="#916DCB" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">肆 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl05 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-05.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" align=center valign="top" onMouseOver="content_mouse(5)" bgcolor="#4FB9E1" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">伍 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl06 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-06.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" align=center valign="top" onMouseOver="content_mouse(6)" bgcolor="#CCCC66" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">陆 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl07 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-07.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" align=center valign="top" onMouseOver="content_mouse(7)" bgcolor="#FF99CC" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">柒 搜集整理</a></td>
</tr>
</table></td>
<td><div id=divhl08 style="display:none">
<div><a href="#" target="_blank"><img src="images/ad-08.jpg" width="325" height="190" border="0"></a></div>
</div></td>
<td width="20" align=center valign="top" onMouseOver="content_mouse(8)" bgcolor="#99CC33" class="pdboder"><table width=20 border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 height="23" align="center"><img src="images/arrow.gif" width="12" height="12"></td>
</tr>
<tr>
<td align=center><a href="#" target="_blank" class="title1">捌 搜集整理</a></td>
</tr>
</table></td>
</tr>
</table>
<script language=JavaScript src="js/scrollad.js"></script></td>
</tr>
</table>
</body>
</html>
JS代码(scrollad.js):
var timeout2=5000;
//�л�ʱ��var timeout3=10000;
//mouse over ���л�ʱ��var now_content=0;
var total_content=8;
var way=1;
var start_content=Math.round(Math.random()*(total_content-1))+1;
//�����Ϊ��һ��ʾ��function content_mouse(num){
now_content=num;
window.clearInterval(theTimer2);
for (var i=1;
i<=total_content;
i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+num).style.display='block';
theTimer2=setTimeout('change_content()',timeout3);
}
function change_content(){
for (var i=1;
i<=total_content;
i++){
document.getElementById('divhl0'+i).style.display='none';
}
document.getElementById('divhl0'+now_content).style.display='block';
if (way) now_content++;
else now_content--;
if(now_content>total_content){
now_content=total_content-1;
way=0;
}
else if(now_content==0){
now_content=1;
way=1;
}
theTimer2=setTimeout('change_content()',timeout2);
}
theTimer2=setTimeout(function(){
now_content=1;
change_content();
}
,timeout2);
分享到QQ
分享到微博
微信扫一扫
