代码简介：
一个基于JavaScript的新闻类图片切换特效，一张一张自动循环播放，虽然没有什么华丽的修饰功能，但这款图片幻灯切换的最大优点是可以很好的和动态语言ASP/PHP/ASP.NET结合，从数据库中读出图片地址，自动生成图片幻灯切换单元，大大增加了它的实用性，对CSS比较熟悉的朋友，你完全可以将Table部分变为标准的CSS。
代码内容：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片新闻轮番播放的JS代码 - www.webdm.cn</title>
<style type="text/css">
<!--
.t14 {font-size: 9pt; line-height: 130%; text-decoration: none;}
.dg12 {font-size: 9pt; line-height: 14px; color: #0066cc; text-decoration: none}
.ttzy {font-size: 9pt; line-height: 16px; text-decoration: none; color: #A34F17}
a:hover { text-decoration: underline}
a { font-size: 12px}
.fdg12 { font-weight:bold;font-size: 12px; line-height: 14px; color: #3D93BF; text-decoration: none}
.s { font-weight:bold; float:left; font-size:12px;padding:0 2px;border-right:1px solid #666; border-bottom:1px solid
#666; margin:3px 0 0 5px;}
.s a{ text-decoration:none; color:#bc2931; }
.s a:hover{ color:red;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="headlineLayer" style="position:absolute; 219px; height:0px; z-index:37; border: 1px none
#000000;FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0, wipeStyle=1, motion='forward');">
<table id='headline1' width='219' border='0' cellspacing='0' cellpadding='0' align='center' height='50'>
<tr>
<td>
<table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="101" class="dg12"></td>
<td width="52" class="dg12"></td>
<td colspan="2" width="66" height="1">
<!--
<div align="center">
<div class="s">1</div>
<div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
<div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
</div>
-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="366" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><a href="http://www.webdm.cn" target="_blank"><img
src=http://www.webdm.cn/images/wall5.jpg width="329" height="228" vspace="6" border="0"><br>五一黄金周我们旅游再次出
现高峰</a></td></tr></table>
</td>
</tr>
</table>
</div>
<table id='headline1' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none' width="219">
<tr>
<td>
<table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="101" class="dg12"></td>
<td width="52" class="dg12"></td>
<td colspan="2" width="66" height="1">
<!--
<div align="center">
<div class="s">1</div>
<div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
<div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
</div>
-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><a href="/" target='_blank' class='ttzy'></a>
<table width="366" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><a href=/ target="_blank"><img src=http://www.webdm.cn/images/wall7.jpg width="329"
height="228" vspace="6" border="0">
<br>人间仙镜，世外桃源</a></td></tr></table>
</td>
</tr>
</table>
<table id='headline2' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
<tr>
<td>
<table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="101" class="dg12"></td>
<td width="52" class="dg12"></td>
<td colspan="2" width="66" height="1">
<!--
<div align="center">
<div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
<div class="s">2</div>
<div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
</div>
-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><a href="/" target='_blank' class='ttzy'></a>
<table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href=/
target="_blank"><img src=http://www.webdm.cn/images/wall8.jpg width="329" height="228" vspace="6" border="0"><br>黄
金周成为摄影爱好者的天堂</a></td></tr></table>
</td>
</tr>
</table>
<table id='headline3' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
<tr>
<td>
<table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td width="101" class="dg12"></td>
<td width="52" class="dg12"></td>
<td colspan="2" width="66" height="1">
<!--
<div align="center">
<div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
<div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
<div class="s">3</div>
</div>
-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"><a href=/ target='_blank' class='ttzy'></a>
<table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href=/
target="_blank"><img src=http://www.webdm.cn/images/wall1.jpg width="329" height="228" vspace="6" border="0"><br>我
们应冷静看待黄金周过后的社会危机</a></td> </tr> </table>
</td>
</tr>
</table>
<script language="javascript">
var currentIEBrowser = navigator.appName.indexOf("Microsoft") != -1;
var currentL=1;
var first=true;
function switchContent() {
if(currentL >=4) currentL=1;
if(first) currentL++;
jumpHeadline(currentL++);
}
function jumpHeadline(c) {
first=false;
if(c < 1 || c >= 4) return;
if(currentIEBrowser)
{
headlineLayer.filters[0].apply();
headlineLayer.innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0'
align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
headlineLayer.filters[0].play();
}else
{
document.getElementById('headlineLayer').innerHTML = "<TABLE width='219' border='0' cellspacing='0'
cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
}
}
setInterval("switchContent()",5000);
</script>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！
</p>
代码来自：http://www.webdm.cn/webcode/0e5cfe45-5b56-454f-9aa6-5efe7ed0f9fd.html