zoukankan      html  css  js  c++  java
  • 新闻幻灯图片轮番播放

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      5 <title>图片自动翻动播放</title>
      6 <style type="text/css">
      7 <!--
      8 .t14 {font-size: 9pt; line-height: 130%; text-decoration: none;}
      9 .dg12 {font-size: 9pt; line-height: 14px; color: #0066cc; text-decoration: none}
     10 .ttzy {font-size: 9pt; line-height: 16px; text-decoration: none; color: #A34F17}
     11 a:hover { text-decoration: underline}
     12 a { font-size: 12px}
     13 .fdg12 { font-weight:bold;font-size: 12px; line-height: 14px; color: #3D93BF; text-decoration: none}
     14 .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;}
     15 .s a{ text-decoration:none; color:#bc2931; }
     16 .s a:hover{ color:red;}
     17 -->
     18 </style>
     19 </head>
     20 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     21 <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');"> 
     22 <table id='headline1' width='219' border='0' cellspacing='0' cellpadding='0' align='center' height='50'>
     23 <tr> 
     24 <td> 
     25 <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
     26 <tr> 
     27 <td width="101" class="dg12"></td>
     28 <td width="52" class="dg12"></td>
     29 <td colspan="2" width="66" height="1"> 
     30 <!--
     31 <div align="center"> 
     32 <div class="s">1</div>
     33 <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
     34 <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
     35 </div>
     36 -->
     37 </td>
     38 </tr>
     39 </table>
     40 </td>
     41 </tr>
     42 <tr> 
     43 <td align="center"> 
     44 <table width="366" border="0" cellspacing="0" cellpadding="0">
     45 <tr>
     46 <td align="center" valign="top"><a href="#" target="_blank"><img src=/jscss/demoimg/wall5.jpg width="329" height="228" vspace="6" border="0"><br>五一黄金周我们旅游再次出现高峰</a></td></tr></table>
     47 </td>
     48 </tr>
     49 </table>
     50 </div>
     51 <table id='headline1' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none' width="219">
     52 <tr> 
     53 <td> 
     54 <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
     55 <tr> 
     56 <td width="101" class="dg12"></td>
     57 <td width="52" class="dg12"></td>
     58 <td colspan="2" width="66" height="1"> 
     59 <!--
     60 <div align="center"> 
     61 <div class="s">1</div>
     62 <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
     63 <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
     64 </div>
     65 -->
     66 </td>
     67 </tr>
     68 </table>
     69 </td>
     70 </tr>
     71 <tr> 
     72 <td align="center"><a href="/" target='_blank' class='ttzy'></a> 
     73 <table width="366" border="0" cellspacing="0" cellpadding="0">
     74 <tr>
     75 <td align="center" valign="top"><a href="#" target="_blank"><img src=/jscss/demoimg/wall7.jpg width="329" height="228" vspace="6" border="0">
     76 <br>人间仙镜,世外桃源</a></td></tr></table>
     77 </td>
     78 </tr>
     79 </table>
     80 <table id='headline2' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
     81 <tr> 
     82 <td> 
     83 <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
     84 <tr> 
     85 <td width="101" class="dg12"></td>
     86 <td width="52" class="dg12"></td>
     87 <td colspan="2" width="66" height="1"> 
     88 <!--
     89 <div align="center"> 
     90 <div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
     91 <div class="s">2</div>
     92 <div class="s"><a href="javascript:jumpHeadline(3)">3</a></div>
     93 </div>
     94 -->
     95 </td>
     96 </tr>
     97 </table>
     98 </td>
     99 </tr>
    100 <tr> 
    101 <td align="center"><a href="/" target='_blank' class='ttzy'></a> 
    102 <table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href="/jscss/" target="_blank"><img src=/jscss/demoimg/wall8.jpg width="329" height="228" vspace="6" border="0"><br>黄金周成为摄影爱好者的天堂</a></td></tr></table>
    103 </td>
    104 </tr>
    105 </table>
    106 <table id='headline3' width='219' border='0' cellspacing='0' cellpadding='0' height='50' style='display:none'>
    107 <tr> 
    108 <td> 
    109 <table width="219" height="1" valign="middle" border="0" cellpadding="0" cellspacing="0" align="right">
    110 <tr> 
    111 <td width="101" class="dg12"></td>
    112 <td width="52" class="dg12"></td>
    113 <td colspan="2" width="66" height="1"> 
    114 <!--
    115 <div align="center"> 
    116 <div class="s"><a href="javascript:jumpHeadline(1)">1</a></div>
    117 <div class="s"><a href="javascript:jumpHeadline(2)">2</a></div>
    118 <div class="s">3</div>
    119 </div>
    120 -->
    121 </td>
    122 </tr>
    123 </table>
    124 </td>
    125 </tr>
    126 <tr> 
    127 <td align="center"><a href=/ target='_blank' class='ttzy'></a> 
    128 <table width="366" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top"><a href=/ target="_blank"><img src=/jscss/demoimg/wall9.jpg width="329" height="228" vspace="6" border="0"><br>我们应冷静看待黄金周过后的社会危机</a></td> </tr> </table>
    129 </td>
    130 </tr>
    131 </table>
    132 <script language="javascript">
    133 var currentIEBrowser = navigator.appName.indexOf("Microsoft") != -1;
    134 var currentL=1;
    135 var first=true;
    136 function switchContent() {
    137 
    138 if(currentL >=4) currentL=1;
    139 if(first) currentL++;
    140 jumpHeadline(currentL++);
    141 
    142 }
    143 function jumpHeadline(c) {
    144 first=false;
    145 if(c < 1 || c >= 4) return;
    146 if(currentIEBrowser)
    147 {
    148 headlineLayer.filters[0].apply();
    149 headlineLayer.innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
    150 headlineLayer.filters[0].play();
    151 }else
    152 {
    153 document.getElementById('headlineLayer').innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
    154 }
    155 
    156 }
    157 
    158 setInterval("switchContent()",5000);    
    159 </script>
    160 </body>
    161 </html>

    原文地址: http://www.codefans.net/jscss/code/736.shtml

  • 相关阅读:
    postgresql批量插入copy_from()的使用
    Fabric SSH链接时关于找不到主机的问题
    Python多线程获取返回值
    网页正文提取,降噪的实现(readability/Document)
    HTML标签参考手册
    javascript获取当前日期和时间
    2017易观OLAP算法大赛
    Apache DolphinScheduler 诞生记
    Apache DolphinScheduler(海豚调度)
    开源分布式工作流任务调度系统Easy Scheduler Release 1.0.2发布
  • 原文地址:https://www.cnblogs.com/yiliweichinasoft/p/3678168.html
Copyright © 2011-2022 走看看