html：修改版火影忍者静态网页设计,实例三(附带完整源码)-阿里云开发者社区

上效果图，想象下这是动态的，因为我只能截图，就想象下吧，我觉得就这么单纯的网页就算加上酷炫效果也不够好啊，我就每一个网页加了火影忍者的主题曲，还真的好听，哈哈！

先看视频感受下效果：

1639463203(1).png

视频加载浪费流量没关系，看我截图,想象下这是动态的！动态的！！还带着主题曲的背景音乐!!

上源码：

一.火影介绍源码：

<!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 charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>火影介绍</title>
<embed src="music/生物股长 - ブルーバード (青鸟).mp3" hidden="true" autostart="true" loop="true">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<bgsound src="music/xrx.mp3" loop="-1" volume="100"  />
<div style="margin: 0 auto; width:1000px;">
<table id="header" align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="195"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="180">
                    <param name="movie" value="flash/banner.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <embed wmode="transparent" src="flash/banner.swf" width="1000" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
                </object></td>
  </tr>
</table>
<table width="1000" height="" border="0" align="center" cellpadding="0" cellspacing="0" id="main">
  <!--DWLayoutTable-->
  <tr>
    <td width="10" height="36">&nbsp;</td>
    <td width="980" valign="top" background="images/menu.jpg">
    <ul class="nav">
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">火影介绍</a></li>
      <li><a href="role.html">角色资料</a></li>
      <li><a href="pic.html">精选壁纸</a></li>
    </ul> </td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="464">&nbsp;</td>
    <td valign="top" bgcolor="#FFFFFF">
  <h3 style="color:#333333;">火影介绍（本页背景音乐-《夏日星》）</h3>
  <p><img src="images/about1.jpg" width="280" height="380" style="padding:10px; float:left;" />《火影忍者》是日本漫画家岸本齐史的代表作，作品自1999年开始在周刊《少年JUMP》上连载后，读者反应非常热烈。故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的的职业。在这个忍者的世界中，每一位年轻的主人翁都在开拓着属于自己的忍道。</p>
      <p>
<img src="images/about2.jpg" width="300" height="220" style="padding:10px; float:right;" />这是一个忍者的世界。从小身上封印着邪恶的九尾妖狐， 鸣人受尽了村人的冷落，只是拼命用各种恶作剧试图吸引大家的注意力。好在还是有依鲁卡老师关心他，鸣人的性格才没有变得扭曲，他总是干劲十足，超级乐观。为了让更多的人认可自己，鸣人的目标是成为第六代火影！鸣人的同伴，是由老师确定的同班同学，随着共同的战斗，终于成了互相认可、信赖的好伙伴。　
　　由日本集英社授权，连环画出版社正式引进出版，北京中少动漫图书有限公司发行的正式简体中文版《火影忍者》截止2011年3月已发行第53卷。</p></td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="1000" height="40" border="0" align="center" cellpadding="0" cellspacing="0" id="footer">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="60" valign="top"><p>
      版权所有：火影忍者</p>
      <p>作者：川川   学号：123465</p></td>
  </tr>
</table>
</div>
</body>
</html>

二.首页源码

<!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 charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title >首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<div style="margin: 0 auto; width:1000px;">
<table id="header" align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="195"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="180">
                    <param name="movie" value="flash/banner.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <embed wmode="transparent" src="flash/banner.swf" width="1000" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
                </object></td>
  </tr>
</table>
<table width="1000" height="" border="0" align="center" cellpadding="0" cellspacing="0" id="main">
  <!--DWLayoutTable-->
  <tr>
    <td width="10" height="36">&nbsp;</td>
    <td width="980" valign="top" background="images/menu.jpg">
    <ul class="nav">
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">火影介绍</a></li>
      <li><a href="role.html">角色资料</a></li>
      <li><a href="pic.html">精选壁纸</a></li>
    </ul> </td>
  <marquee width=100%  height=40  bgcolor=red width=200 onMouseOut="this.start()" onMouseOver="this.stop()">火影忍者世界</marquee>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="464">&nbsp;</td>
    <td valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><iframe src="slide.html" width="580" height="300" frameborder="0" scrolling="no" ></iframe>
          </td>
        <td><h3 style="color:#333333;">火影忍者主题曲</h3>
    <hr />
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="380" height="260" id="FLVPlayer">
            <param name="movie" value="FLVPlayer_Progressive.swf" />
            <param name="salign" value="lt" />
            <param name="quality" value="high" />
            <param name="scale" value="noscale" />
            <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false" />
            <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="380" height="260" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />            
</object>
    </td>
      </tr>
      <tr>
        <td colspan="2"><table class="show" width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="5" bgcolor="#F20000"><h3>壁纸预览</h3></td>
          </tr>
          <tr>
            <td><img src="images/bz1.jpg" width="190" height="150" /></td>
            <td><img src="images/bz2.jpg" width="190" height="150" /></td>
            <td><img src="images/bz3.jpg" width="190" height="150" /></td>
            <td><img src="images/bz4.jpg" width="190" height="150" /></td>
            <td><img src="images/bz5.jpg" width="190" height="150" /></td>
          </tr>
        </table>
    <p>&nbsp;</p>
    </td>
        </tr>
    </table></td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="1000" height="40" border="0" align="center" cellpadding="0" cellspacing="0" id="footer">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="60" valign="top"><p>
      版权所有：火影忍者</p>
      <p>作者：川川  学号：123456</p></td>
  </tr>
</table>
</div>
</body>
</html>

三.精选壁纸源码：

<!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 charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精选壁纸</title>
<embed src="music/Anly - カラノココロ (空虚的心).mp3" hidden="true" autostart="true" loop="true">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<div style="margin: 0 auto; width:1000px;">
<table id="header" align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="195"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="180">
                    <param name="movie" value="flash/banner.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <embed wmode="transparent" src="flash/banner.swf" width="1000" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
                </object></td>
  </tr>
</table>
<table width="1000" height="" border="0" align="center" cellpadding="0" cellspacing="0" id="main">
  <!--DWLayoutTable-->
  <tr>
    <td width="10" height="36">&nbsp;</td>
    <td width="980" valign="top" background="images/menu.jpg">
    <ul class="nav">
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">火影介绍</a></li>
      <li><a href="role.html">角色资料</a></li>
      <li><a href="pic.html">精选壁纸</a></li>
    </ul> </td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="464">&nbsp;</td>
    <td valign="top" bgcolor="#FFFFFF">
    <h3 style="color:#333333;">精选壁纸</h3>
<div style="margin:0 auto"></div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div align="center"><a href="images/bz1.jpg"><img src="images/bz1.jpg" width="300" height="220" /></a></div></td>
          <td><div align="center"><a href="images/bz2.jpg"><img src="images/bz2.jpg" alt="壁纸" width="300" height="220" /></a></div></td>
          <td><div align="center"><a href="images/bz3.jpg"><img src="images/bz3.jpg" alt="壁纸" width="300" height="220" /></a></div></td>
        </tr>
        <tr>
          <td><div align="center"><a href="images/bz4.jpg"><img src="images/bz4.jpg" alt="壁纸" width="300" height="220" /></a></div></td>
          <td><div align="center"><a href="images/bz5.jpg"><img src="images/bz5.jpg" alt="壁纸" width="300" height="220" /></a></div></td>
          <td><div align="center"><a href="images/bz6.jpg"><img src="images/bz6.jpg" alt="壁纸" width="300" height="220" /></a></div></td>
        </tr>
      </table>
    <p>&nbsp;</p>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="1000" height="40" border="0" align="center" cellpadding="0" cellspacing="0" id="footer">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="60" valign="top"><p>
      版权所有：火影忍者</p>
      <p>作者：川川  学号：123456</p></td>
  </tr>
</table>
</div>
</body>
</html>

四.角色介绍源码：

<!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 charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>角色资料</title>
<embed src="music/六三四 - Naruto Main Theme.mp3" hidden="True" autostart="true" loop="true">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','本页内容需要使用较新的 Macromedia Flash Player 版本。是否现在下载它？');">
<div style="margin: 0 auto; width:1000px;">
<table id="header" align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="195"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1000" height="180">
                    <param name="movie" value="flash/banner.swf">
                    <param name="quality" value="high">
                    <param name="wmode" value="transparent">
                    <embed wmode="transparent" src="flash/banner.swf" width="1000" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
                </object></td>
  </tr>
</table>
<table width="1000" height="" border="0" align="center" cellpadding="0" cellspacing="0" id="main">
  <!--DWLayoutTable-->
  <tr>
    <td width="10" height="36">&nbsp;</td>
    <td width="980" valign="top" background="images/menu.jpg">
    <ul class="nav">
      <li><a href="index.html">首页</a></li>
      <li><a href="about.html">火影介绍</a></li>
      <li><a href="role.html">角色资料</a></li>
      <li><a href="pic.html">精选壁纸</a></li>
    </ul> </td>
    <td width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="464">&nbsp;</td>
    <td valign="top" bgcolor="#FFFFFF">
    <h3 style="color:#333333;">角色资料</h3>
<div style="margin:0 auto">
<table width="90%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC">
      <tr>
        <td><img src="images/mr.jpg" width="140" height="142" style="padding:10px; float:left;" />
身份：火之国木叶村下忍（但实际上已经是超越火影的超S级忍者）、四代火影波风水门之子、自来也嫡传关门弟子、第三任九尾人柱力，传说中的“预言之子”<br />
中文名：漩涡鸣人<br />
日文名：うずまきナルト</td>
        <td><img src="images/zz.jpg" width="202" height="150" style="padding:10px; float:left;" />
宇智波佐助一心想追回的同伴，天赋与勤奋并存的天才忍者，拥有写轮眼的宇智波一族的后裔。<br />
中文名：宇智波佐助<br />
日文名：うちは サスケ   </td>
      </tr>
      <tr>
        <td><img src="images/kkx.jpg" width="151" height="146" style="padding:10px; float:left;" />
原为木叶暗部成员，后成为第七班的导师。因为拥有一只写轮眼，可以复制别人的忍术，故有“拷贝忍者”的外号。<br />
中文名：旗木卡卡西</br>
日文名：はたけカカシ 
    </td>
        <td>
<img src="images/cyy.jpg" style="padding:10px; float:left;" />
木叶中忍，五代火影千手纲手的弟子，木叶第一技师旗木卡卡西之徒，新一代出色医忍，原七班队友为漩涡鸣人和宇智波佐助，现七班队友为漩涡鸣人和佐井。<br />
中文名：春野樱</br>
日文名：はるのサクラ 
    </td>
      </tr>
    </table>
</div>
      </td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="1000" height="40" border="0" align="center" cellpadding="0" cellspacing="0" id="footer">
  <!--DWLayoutTable-->
  <tr>
    <td width="1000" height="60" valign="top"><p>
      版权所有：火影忍者</p>
      <p>作者：川川  学号：123456</p></td>
  </tr>
</table>
</div>
</body>
</html>

五.首页轮播图源码：

<!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 charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>幻灯片</title>
<style type="text/css" media="all">
body{ background:white;}
.d1{width:550px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:550px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:280px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
//主函数
var s=function(){
var interv=2000; //切换时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
</head>
<body>
<div id="fade_focus" style="padding:0px; margin:px;">
    <div class="loading">Loading...<br /><img src="images/logings.gif" width="100" height="100" /></div>
    <ul>
      <li><img src="images/lb1.jpg" width="550" height="280" alt="火影忍者1" /></li>
      <li><img src="images/lb2.jpg" width="550" height="280" alt="火影忍者2" /></li>
      <li><img src="images/lb3.jpg" width="550" height="280" alt="火影忍者3" /></li>
       <li><img src="images/lb4.jpg" width="550" height="280" alt="火影忍者4" /></li>
    </ul>
</div>
</body>
</html>

所有html我已经贴出来了，需要完整文件：图片资源，flash,css，音乐的扣我：2835809579

提供个思路，还可以以同样的道理，换成别的主题。

html：修改版火影忍者静态网页设计,实例三(附带完整源码)

热门文章

最新文章

相关课程

相关电子书

相关实验场景