Js新闻幻灯图片轮播的实现代码

发布时间:2020-07-27编辑:脚本学堂
分享一例js实现的新闻幻灯片的轮播代码,实现新闻类图片的切换特效,一张一张自动循环播放,效果不错,有需要的朋友参考下。

说明:
一个基于javascript的新闻类图片切换特效,一张一张自动循环播放,这款图片幻灯切换的最大优点是可以很好的和动态语言ASP/PHP/ASP.NET结合,从数据库中读出图片地址,自动生成图片幻灯切换单元,大大增加了它的实用性,对CSS比较熟悉的朋友,完全可以将Table部分变为标准的CSS。

来看实例代码,如下:
 

复制代码 代码示例:
<!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>图片自动翻动播放-www.jb200.com</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="#" target="_blank"><img src=/jscss/demoimg/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=/jscss/demoimg/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="/jscss/" target="_blank"><img src=/jscss/demoimg/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=/jscss/demoimg/wall9.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>