新闻幻灯图片轮番播放
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; width: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
