几张图片带标题定时切换显示特效

1个月前 (04-18 14:32)阅读47回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5074
  • 级别管理员
  • 主题1014
  • 回复2
楼主

这是一款图片和标题定时切换显示特效,可根据自己的网站需求来自定义图片,或者自己修改切换速度即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>几张图片带标题定时切换显示特效_武鸣人</title>
<style type="text/css">
<!--
.wuming_ren{font-family: "宋体"; font-size: 12px; line-height: 14px; color: #3D93BF; text-decoration: none}
.www_wuming_ren{font-family: "宋体"; font-size: 12px; line-height: 16px; text-decoration: none; color: #A34F17}
a:hover{text-decoration: underline}
a{font-size: 12px}
.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:#000;}
-->
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="head_wwwwumingren" 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="wuming_ren"></td>
            <td width="52" class="wuming_ren"></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="https://www.wuming.ren" target="_blank"><img src="/img/20240418_www_wuming_ren_24.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="wuming_ren"></td>
          <td width="52" class="wuming_ren"></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="https://www.wuming.ren" target='_blank' class='www_wuming_ren'></a> 
      <table width="366" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td align="center" valign="top"><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240418_www_wuming_ren_25.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="wuming_ren"></td>
          <td width="52" class="wuming_ren"></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="https://www.wuming.ren" target='_blank' class='www_wuming_ren'></a> 
      <table width="366" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td align="center" valign="top"><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240418_www_wuming_ren_26.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="wuming_ren"></td>
          <td width="52" class="wuming_ren"></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="https://www.wuming.ren" target='_blank' class='www_wuming_ren'></a> 
      <table width="366" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td align="center" valign="top"><a href="https://www.wuming.ren" target="_blank"><img src="/img/20240418_www_wuming_ren_27.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 switch_www_wuming_ren() {
    if(currentL >=4) currentL=1;
     if(first) currentL++;
    jumpHeadline(currentL++);
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function jumpHeadline(c) {
    first=false;
 if(c < 1 || c >= 4) return;
 if(currentIEBrowser)
 {
  head_wwwwumingren.filters[0].apply();
     head_wwwwumingren.innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
  head_wwwwumingren.filters[0].play();
 }else
 {
     document.getElementById('head_wwwwumingren').innerHTML = "<TABLE width='219' border='0' cellspacing='0' cellpadding='0' align='center'>"+document.getElementById('headline'+c).innerHTML+"</TABLE>";
 }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
setInterval("switch_www_wuming_ren()",5000); 
</script>
</body>
</html>


0
0
收藏0
回帖

几张图片带标题定时切换显示特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息