图片新闻轮番播放的JS代码

代码简介：

一个基于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; width: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

posted @   网页代码站  阅读(689)  评论(0)  编辑  收藏  举报
编辑推荐：
· 理解Rust引用及其生命周期标识（下）
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 2025成都.NET开发者Connect圆满结束
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 用一种新的分类方法梳理设计模式的脉络
历史上的今天：
2010-12-22 只用CSS打造符合标准型下拉菜单_网页代码站(www.webdm.cn)
2010-12-22 鼠标指向变成英文导航（CSS）_网页代码站(www.webdm.cn)
点击右上角即可分享
微信分享提示