web前端项目-影视网站开发

影视网站

本项目主要使用到了 HTMLCSSJavaScript脚本技术;AJAX无刷新技术;jQuery等技术实现了动态影视网页

运行效果:
在这里插入图片描述
在这里插入图片描述

一:index.html

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>蓝网影视</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript">
/******************错误处理的函数*******************************/
function onerror(){
	alert("您的操作有误!");
}
/******************实例化Ajax对象的函数*******************************/
function getInfo(){
	var loader=new net.AjaxRequest("check.php?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){
	document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.onload=function(){
	getInfo();	//调用getInfo()函数获取最新消息
	window.setInterval("getInfo()", 600000);	//每隔10分钟调用一次getInfo()函数
}
</script>
<script type="text/javascript"> 
$(document).ready(function(){
	$(".scroll").hover(function(){//鼠标指向滚动区域
		clearTimeout(timeID);//中止超时,即停止滚动
	},function(){//鼠标离开滚动区域
		timeID=setInterval('autoScroll()',3000);   //设置超时函数,每过3秒执行一次函数
	});
});
function autoScroll(){   
	$(".scroll").find(".list").animate({   //自定义动画效果
 		marginTop : "-25px"   
	},500,function(){   
		$(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this);   //把列表第一行内容移动到列表最后
	})   
}   
var timeID=setInterval('autoScroll()',3000);   //设置超时函数,每过3秒执行一次函数

$(document).ready(function() {		
	$(".tab_content").hide();							//将class值为tab_content的div隐藏
	$("ul.tabs li a:first").addClass("active"); 				//为第一个选项卡添加样式
	$(".tab_content:first").show(); 						//将第一个class值为tab_content的div显示
	$("ul.tabs li a").hover(function() {						//将鼠标移到某选项卡上
		$("ul.tabs li a").removeClass("active"); 				//移除样式
		$(this).addClass("active"); 						//为当前的选项卡添加样式
		$(".tab_content").hide(); 						//将所有class值为tab_content的div隐藏
		var activeTab = $(this).attr("name"); 		//获取当前选项卡的name属性值
		$(activeTab).show();							//将相同id值的div显示
	});
});
</script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<table class="top_box" width="1206" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.jpg" width="200" height="50"></td>	
  </tr>
  <tr>
	  <td colspan="6" height="1" bgcolor="#e5e5e5"></td>
  </tr>
  <tr>
  	<td colspan="6" align="center" valign="top">
	<!--导航栏-->
<div>
<script type="text/javascript">
function showadv(par,par2){
	document.getElementById("a0").style.display = "none";//隐藏id为a0的元素
	document.getElementById("a0bg").style.backgroundImage="";	//设置id为a0bg的元素的背景图片为空
	document.getElementById("a1").style.display = "none";//隐藏id为a1的元素
	document.getElementById("a1bg").style.backgroundImage="";//设置id为a1bg的元素的背景图片为空
	document.getElementById("a2").style.display = "none";//隐藏id为a2的元素
	document.getElementById("a2bg").style.backgroundImage="";//设置id为a2bg的元素的背景图片为空
	document.getElementById("a3").style.display = "none";//隐藏id为a3的元素
	document.getElementById("a3bg").style.backgroundImage="";//设置id为a3bg的元素的背景图片为空
	document.getElementById("a4").style.display = "none";//隐藏id为a4的元素
	document.getElementById("a4bg").style.backgroundImage="";//设置id为a4bg的元素的背景图片为空
	document.getElementById("a5").style.display = "none";//隐藏id为a5的元素
	document.getElementById("a5bg").style.backgroundImage="";//设置id为a5bg的元素的背景图片为空
	document.getElementById("a6").style.display = "none";//隐藏id为a6的元素
	document.getElementById("a6bg").style.backgroundImage="";//设置id为a6bg的元素的背景图片为空
	document.getElementById(par).style.display = "";	//显示指定的元素
	document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";	//设置指定元素的背景图片
}
</script>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td width="166" height="42" align="center" id="a0bg">
					<span id="a0color" onMouseOver="showadv('a0','a0bg')">
						<a href="index.html">首页</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a1bg" align="center" width="166">
					<span id="a1color" onMouseOver="showadv('a1','a1bg')">
						<a href="love.html">爱情片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a2bg" align="center" width="166">
					<span id="a2color" onMouseOver="showadv('a2','a2bg')">
						<a href="action.html">动作片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a3bg" align="center" width="166">
					<span id="a3color" onMouseOver="showadv('a3','a3bg')">
						<a href="scienceFiction.html">科幻片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a4bg" align="center" width="166">
					<span id="a4color" onMouseOver="showadv('a4','a4bg')">
						<a href="horror.html">恐怖片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
				<td id="a5bg" align="center" width="166">
					<span id="a5color" onMouseOver="showadv('a5','a5bg')">
						<a href="art.html">文艺片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a6bg" align="center" width="166">
					<span id="a6color" onMouseOver="showadv('a6','a6bg')">
						<a href="cartoon.html">动漫</a>
					</span>
				</td>
              </tr>
            </table>
        </div></td>
      </tr>
      <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
            <tr>
              <td align="left" style="padding-left:12px">欢迎来到蓝网影视</td>
            </tr>
          </table>
            <table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>
          <table id="a2" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:292px" align="left"><ul class="i02w">
                    <li><a href="#">枪战片</a></li>
                  <li><a href="#">武侠片</a></li>
				  <li><a href="#">魔幻片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a3" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:456px"><ul class="i02w">
                    <li><a href="#">外星人</a></li>
                  <li><a href="#">自然灾难</a></li>
				  <li><a href="#">生物变异</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a4" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:636px"><ul class="i02w">
                    <li><a href="#">惊悚片</a></li>
                  <li><a href="#">恐怖片</a></li>
				  <li><a href="#">悬疑片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a5" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:160px"><ul class="i03w">
                  <li>音乐片</li>
                  <li>歌舞片</li>
                  <li>纪录片</li>
                </ul></td>
              </tr>
          </table>
		  <table id="a6" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:2px"><ul class="i03w">
                  <li>历史动漫</li>
                  <li>搞笑动漫</li>
                  <li>英雄动漫</li>
                </ul></td>
              </tr>
          </table></td>
      </tr>
    </table>
  </div>
	<!-- ----------------------------------- -->
	</td>
  </tr>
  <tr>
    <td colspan="6"  bgcolor="#e5e5e5" valign="top">
		<div class="banner" style="width: 100%">
			<div id='tabs'>
				<a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a>
				<a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a>			
			</div>
		</div>
	</td>
  </tr>
</table>

<div class="top_box">
	<div id="kind">
		<ul class="kind">
			<li onMouseOver="showadv('a1')">按地区</li>
			<li onMouseOver="showadv('a2')">按语言</li>
			<li onMouseOver="showadv('a3')">按明星</li>
		</ul>
		<div class="sibkind">
		<div id="a1">
			<ul class="adv">
				<li>内地</li>
				<li>香港</li>
				<li>美国</li>
				<li>韩国</li>
				<li>欧洲</li>
				<li>泰国</li>
				<li>其他</li>
			</ul>
		</div>
		<div id="a2">
			<ul class="adv">
				<li>中文</li>
				<li>英文</li>
			</ul>
		</div>
		<div id="a3">
			<ul class="adv">
				<li>杰森.斯坦森</li>
				<li>阿兰.德龙</li>
				<li>阿诺德.施瓦辛格</li>
				<li>亚当.桑德勒</li>
				<li>汤姆.克鲁斯</li>
				<li>基努.里维斯</li>
			</ul>
		</div>
		</div>
	</div>
	<span class="hot">热门专题</span>
	<div id="showInfo"></div>
</div>

<table class="top_box" width="1206" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
	<td>&nbsp;</td>
    <td width="920" valign="top">
<!--最新影视-->
	  <table width="100%" height="50" border="0" style="margin-left:0;">
	    <tr>
		  <td align="left" valign="bottom" style="font-size:22px;">电影</td>
		</tr>
	  </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:0;">
        <tr>
          <td width="40%">
		  <table width="98%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
		    <tr><td><a target="_blank"><img src="video/1.jpg" width="400" height="420" border="0" /></a></td></tr>
			<tr><td height="40" valign="bottom" style="padding-left:20px; font-size:20px; color: #333333"><a target="_blank">终结者5</a></td></tr>
			<tr><td height="40" valign="middle" style="padding-left:20px; font-size:14px; color: #7a7a7a">未来战争终结者</td></tr>
		  </table>
		  </td>
		  <td width="54%" align="center">
		    <table width="100%" border="0">

        <tr>
          <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/2.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">午夜邂逅</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">克里斯.埃文斯导演处女作</td></tr>
		  </table>
		  </td>
		  <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/3.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">我是传奇</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">末世科幻动作电影</td></tr>
		  </table>
		  </td>
		</tr>
		<tr>
          <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/4.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">史密斯夫妇</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">完美间谍夫妻档</td></tr>
		  </table>
		  </td>
		  <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/5.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">一线声机</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">一线声机保持通话</td></tr>
		  </table>
		  </td>
		</tr>
      </table>
	</td>
	</tr>
	</table>
	</td>
	<td width="270" valign="top">
	<!--影视排行 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;">
	<tr>
		<td align="left" height="50" style="font-size:22px;" valign="bottom">电影排行</td>
		<td align="center" valign="bottom">
		  <ul class="tabs">
		  	<li><a name="#tab1">热播</a></li>
			<li><a name="#tab2">经典</a></li>
		  </ul>
		</td>
	</tr>
</table>
<div id="tab1" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>
	var num = 1;//定义影片排名变量
    //定义影片名称数组
	var nameArr = new Array("终结者5","飓风营救","我是传奇","一线声机","罗马假日","史密斯夫妇","午夜邂逅");
    //定义影片主演数组
	var dnumArr = new Array("阿诺德.施瓦辛格","连姆.尼森","威尔.史密斯","杰森.斯坦森","格里高利.派克","布拉德.皮特","克里斯.埃文斯");
	for(var i=0; i<nameArr.length; i++){
		document.write('<tr height="43">');
		document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名
		document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称
		document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演
	}
</script>
</table>
</div>
<div id="tab2" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>
	var num = 1;//定义影片排名变量
	//定义影片名称数组
	var nameArr = new Array("机械师2:复活","变形金刚","暮光之城","怦然心动","电话情缘","超凡蜘蛛侠","雷神");
	//定义影片主演数组
	var dnumArr = new Array("杰森.斯坦森","希亚.拉博夫","克里斯汀.斯图尔特","玛德琳.卡罗尔","杰西.麦特卡尔菲","安德鲁.加菲尔德","克里斯.海姆斯沃斯");
	for(var i=0; i<nameArr.length; i++){
		document.write('<tr height="43">');
		document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名
		document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称
		document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演
	}
</script>
</table>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;">
	<tr><td align="left" height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div class="scroll">   
	<ul class="list">   
 		<li><a href="#">《荒野大镖客》重磅来袭</a></li>   
		<li><a href="#">《星球大战外传》科幻迷不容错过</a></li>   
		<li><a href="#">《野鹅敢死队》重现战场</a></li>  
		<li><a href="#">《九死一生》原始丛林探险</a></li>   
		<li><a href="#">《荒野猎人》莱昂纳多复仇与熊搏斗</a></li> 
	</ul>   
</div>
	</td>
	  <td>&nbsp;</td>
  </tr>
</table>

<div id="demo" class="top_box" style="overflow: hidden; width: 1206px; height: 264px">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td id="demo1"><table cellpadding="0" cellspacing="0">
        <tr>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/6.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">机械师2:复活</a></div>
			  <div class="content">冷面杀手铁汉柔情</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/7.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">变形金刚</a></div>
			  <div class="content">以动画为基础的创新作品</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/8.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">暮光之城</a></div>
			  <div class="content">吸血鬼的爱情故事</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/9.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">怦然心动</a></div>
			  <div class="content">男孩女孩间的有趣战争</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/10.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">飓风营救</a></div>
			  <div class="content">老特工重新出山</div></td>
		  <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/11.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">罗马假日</a></div>
			  <div class="content">好莱坞黑白电影经典之作</div></td>
        </tr>
      </table></td>
      <td id="demo2"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
var speed=30;//设置超时时间
demo2.innerHTML=demo1.innerHTML;//设置id为demo2的元素的HTML内容
//设置图片向左滚动
function Marquee(){
	if(demo2.offsetWidth-demo.scrollLeft<=0){
		demo.scrollLeft-=demo1.offsetWidth;
	}else{
		demo.scrollLeft++;
	}
}
var MyMar=setInterval(Marquee,speed);//实现图片滚动
//鼠标移入图片时停止滚动
demo.onmouseover=function(){
	clearInterval(MyMar);
}
//鼠标移出图片时继续滚动
demo.onmouseout=function(){
	MyMar=setInterval(Marquee,speed);
}
</script>

<div align="center">
<!-- <img src="images/call.png" border="0" usemap="#Map" /> -->
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
<table id="float" width="81" cellspacing="0">
  <!-- <tr>
    <td><img src="images/ra_01.png" width="81" height="12" /></td>
  </tr> -->
  <tr>
    <td align="center" background="images/ra_03.gif">
	  <table width="100%" border="0">
      <!--  <tr>
          <td height="65" align="center" valign="top">
		    <a href="#">
			 <img src="images/365App.png" width="59" height="63" border="0"/>
			</a>
		  </td>
        </tr> -->
       <!-- <tr>
          <td height="15" align="center" valign="top"></td>
        </tr> -->
       <!-- <tr>
          <td height="85" align="center" valign="top">
		   <img src="images/erweima.png" width="59" height="81" border="0"/>
		  </td>
        </tr> -->
      </table>
	</td>
  </tr>
 <!-- <tr>
    <td><img src="images/ra_02.png" width="81" height="11" /></td>
  </tr> -->
</table>
<script type="text/javascript" src="js/float.js"></script>
</body>

二:scienceFiction.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<link rel="stylesheet" href="css/style.css" />
<body>

<table class="top_box" width="1212" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.png"></td>	
  </tr>
  <tr>
	  <td colspan="6" height="1" bgcolor="#e5e5e5"></td>
  </tr>
  <tr>
  	<td colspan="6" align="center" valign="top">
	<!--导航栏-->
		<div>
    <script language="JavaScript" type="text/javascript">
function showadv(par,par2)
{
document.getElementById("a0").style.display = "none";
document.getElementById("a0bg").style.backgroundImage="";	
document.getElementById("a1").style.display = "none";
document.getElementById("a1bg").style.backgroundImage="";
document.getElementById("a2").style.display = "none";
document.getElementById("a2bg").style.backgroundImage="";
document.getElementById("a3").style.display = "none";
document.getElementById("a3bg").style.backgroundImage="";
document.getElementById("a4").style.display = "none";
document.getElementById("a4bg").style.backgroundImage="";
document.getElementById("a5").style.display = "none";
document.getElementById("a5bg").style.backgroundImage="";
document.getElementById("a6").style.display = "none";
document.getElementById("a6bg").style.backgroundImage="";
document.getElementById(par).style.display = "";	
document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";	
}
  </script>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td width="166" height="42" align="center" id="a0bg"><span id="a0color" onMouseOver="showadv('a0','a0bg')"><a href="index.html">首页</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a1bg" align="center" width="166"><span id="a1color" onMouseOver="showadv('a1','a1bg')"><a href="love.html">爱情片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a2bg" align="center" width="166"><span id="a2color" onMouseOver="showadv('a2','a2bg')"><a href="action.html">动作片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a3bg" align="center" width="166"><span id="a3color" onMouseOver="showadv('a3','a3bg')"><a href="scienceFiction.html">科幻片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a4bg" align="center" width="166"><span id="a4color" onMouseOver="showadv('a4','a4bg')"><a href="horror.html">恐怖片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
				<td id="a5bg" align="center" width="166"><span id="a5color" onMouseOver="showadv('a5','a5bg')"><a href="art.html">文艺片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a6bg" align="center" width="166"><span id="a6color" onMouseOver="showadv('a6','a6bg')"><a href="cartoon.html">动漫</a></span></td>
              </tr>
            </table>
        </div></td>
      </tr>
      <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
            <tr>
              <td align="left" style="padding-left:12px">欢迎来到365影视网</td>
            </tr>
          </table>
            <table id="a1" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>
          <table id="a2" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:292px" align="left"><ul class="i02w">
                    <li><a href="#">枪战片</a></li>
                  <li><a href="#">武侠片</a></li>
				  <li><a href="#">魔幻片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:456px"><ul class="i02w">
                    <li><a href="#">外星人</a></li>
                  <li><a href="#">自然灾难</a></li>
				  <li><a href="#">生物变异</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a4" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:636px"><ul class="i02w">
                    <li><a href="#">惊悚片</a></li>
                  <li><a href="#">恐怖片</a></li>
				  <li><a href="#">悬疑片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a5" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:160px"><ul class="i03w">
                  <li>音乐片</li>
                  <li>歌舞片</li>
                  <li>纪录片</li>
                </ul></td>
              </tr>
          </table>
		  <table id="a6" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:2px"><ul class="i03w">
                  <li>历史动漫</li>
                  <li>搞笑动漫</li>
                  <li>英雄动漫</li>
                </ul></td>
              </tr>
          </table></td>
      </tr>
    </table>
  </div>
	<!-- ----------------------------------- -->
	</td>
  </tr>
  <tr>
    <td colspan="6"  bgcolor="#e5e5e5" valign="top">
		<!-- <div class="banner" style="width: 100%">
			<div width="100%" style="height: 154px; background: url('images/login_bg.jpg') no-repeat center">
			</div>
		</div> -->
	</td>
  </tr>
</table>

<div class="w_1200" style="height:1px; background-color: #CCCCCC"></div>
<!-- 列表-->



<table class="w_1200 right_table" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td align="left" style="font-size:22px; padding-left:0px;">热门推荐</td></tr>
</table>

<div class="w_1200" style="">

<!--显示影视资料 -->
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/1.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">终结者5</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演:</td>
			<td>艾伦.泰勒</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演:</td>
			<td >阿诺德.施瓦辛格</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型:</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png" border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro1.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/7.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">变形金刚</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演:</td>
			<td>迈克尔.贝</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演:</td>
			<td >希亚.拉博夫</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型:</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png"  border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro7.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/14.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">超凡蜘蛛侠</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演:</td>
			<td>马克.韦布</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演:</td>
			<td >安德鲁.加菲尔德</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型:</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png"  border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro14.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
</div>
<div align="center">
<img src="images/call.png" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
</body>

三:check.php

<?php
header("Content-type:text/html;charset=utf-8");
?>
<div>
	<ul>
	  <li>《愤怒的小鸟》小鸟飞起来</li>
	  <li>《极度惊悚》胆小者勿入</li>
	  <li>《黑海夺金》裘德.洛成摸金校尉</li>
	  <li>《潜伏者》毒师卧底贩毒集团</li>
	</ul>
</div>

四:CSS文件

(1)intro.css
*{
margin:0px;
padding:0px;
}
.moviedetail{
	font-size: 20px;
	color: #2bb673; 
	border-bottom: 4px solid #2bb673; 
	line-height: 54px; 
	margin: 0 0 6px 0px; 
	padding-bottom: 10px
}
.pic{
margin:15px 0px;
border:1px #CCCCCC solid;
}
body{
font-size:18px;}
.moviename{
font-size:24px; 
font-weight:bolder;
}.movieintro{
font-size:14px; 
line-height:30px;
}

五:JS文件

(1)AjaxRequest.js
var net=new Object();		//创建一个自定义对象
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数,最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
  if (!method){
    method="GET";	//设置默认的请求方式为GET
  }
  if (window.XMLHttpRequest){	//非IE浏览器
    this.req=new XMLHttpRequest();	//创建XMLHttpRequest对象
  } else if (window.ActiveXObject){//IE浏览器
		try {
			this.req=new ActiveXObject("Microsoft.XMLHTTP");	//创建XMLHttpRequest对象
		} catch (e) {
			try {
				this.req=new ActiveXObject("Msxml2.XMLHTTP");	//创建XMLHttpRequest对象
		   } catch (e) {}
		}
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.AjaxRequest.onReadyState.call(loader);
      }

      this.req.open(method,url,true);		// 建立对服务器的调用
	  if(method=="POST"){		// 如果提交方式为POST
		this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 	// 设置请求的内容类型
		this.req.setRequestHeader("x-requested-with", "ajax");	//设置请求的发出者
	  }
      this.req.send(params);			// 发送请求
    }catch (err){
      this.onerror.call(this);			//调用错误处理函数
    }
  }
}

//重构回调函数
net.AjaxRequest.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;		//获取请求状态
  if (ready==4){							//请求完成
	    if (req.status==200 ){					//请求成功
	    	this.onload.call(this);
	    }else{
    		this.onerror.call(this);		//调用错误处理函数
	    }
  }
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
	alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}
(2)float.js
var ImgW=parseInt(float.width);						//获取浮动窗口的宽度
function permute(tfloor,Top,left){
	//获取纵向滚动条滚动的距离
	var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    buyTop=Top+scrollTop;								//获取图片在垂直方向的绝对位置
    document.all[tfloor].style.top=buyTop+"px";			//设置图片在垂直方向的绝对位置
	//获取横向滚动条滚动的距离
	var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
    var buyLeft=scrollLeft+document.body.clientWidth-ImgW;	//获取图片在水平方向的绝对位置
    document.all[tfloor].style.left=buyLeft-left+"px";		//设置图片在水平方向的绝对位置
}
setInterval('permute("float",300,50)',1);			//每隔1毫秒就执行一次permute()函数
(3)script.js
// JavaScript Document
var len = document.getElementsByName("i");//获取name属性值为i的元素
var pos = 0;//定义变量值为0
function changeimage(){
    len[pos].style.display = "none";//隐藏元素
    pos++;//变量值加1
    if(pos == len.length) pos=0;//变量值重新定义为0
    len[pos].style.display = "block";//显示元素
}
setInterval("changeimage()",3000);//每隔3秒钟执行一次changeimage()函数
function addclass(id){
    document.getElementById(id).className = 'nav_cur';
}
function removeclass(id){
    document.getElementById(id).className = 'd';
}

六:intro电影详情文件包

1.intro1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660">
	<tr>
		<td width="34">&nbsp;</td><td colspan="3"><span class="moviedetail">电影详情</span></td>
	</tr>
	<tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr>
  	<tr>
		<td></td>
		<td align="left" valign="top" style="padding-top:30px;">
			<table width="98%">
				<tr>
					<td width="20%" align="left" valign="middle"><img src="../video/1.jpg" width="280" height="362" class="pic"/></td>
					<td width="80%" align="left" valign="top">
						<table style="margin-top:10px; padding-left:20px;">
							<tr>
								<td height="60" class="moviename">终结者5</td>
							</tr>
							<tr>
								<td width="280" height="50">导演:艾伦.泰勒</td>
							</tr>
							<tr>
								<td height="50">主演:阿诺德.施瓦辛格</div></td>
							</tr>
							<tr>
								<td height="50">类型:科幻片</td>
							</tr>
							<tr>
								<td height="50">语言:英文</td>
							</tr>
							<tr>
								<td height="50">发行时间:2007-04-01</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
		  			<td height="48" colspan="2">&nbsp;&nbsp;影片详情:</td>
				</tr>
				<tr>
		  			<td colspan="2" class="movieintro">&nbsp;&nbsp;影片讲述了未来战争如火如荼,凯尔发现眼前的世界与预计中完全不同,一场关乎人类未来的“人机”大战正式上演。</td>
				</tr>
	  		</table>
		</td>
  	</tr>
</table>
2.intro2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660">
	<tr>
		<td width="34">&nbsp;</td><td colspan="3"><span class="moviedetail">电影详情</span></td>
	</tr>
	<tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr>
  	<tr>
		<td></td>
		<td align="left" valign="top" style="padding-top:30px;">
			<table width="98%">
				<tr>
					<td width="20%" align="left" valign="middle"><img src="../video/2.jpg" width="280" height="362" class="pic"/></td>
					<td width="80%" align="left" valign="top">
						<table style="margin-top:10px; padding-left:20px;">
							<tr>
								<td height="60" class="moviename">午夜邂逅</td>
							</tr>
							<tr>
								<td width="280" height="50">导演:克里斯.埃文斯</td>
							</tr>
							<tr>
								<td height="50">主演:克里斯.埃文斯</div></td>
							</tr>
							<tr>
								<td height="50">类型:爱情片</td>
							</tr>
							<tr>
								<td height="50">语言:英文</td>
							</tr>
							<tr>
								<td height="50">发行时间:2014-09-12</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
		  			<td height="48" colspan="2">&nbsp;&nbsp;影片详情:</td>
				</tr>
				<tr>
		  			<td colspan="2" class="movieintro">&nbsp;&nbsp;故事发生在纽约,一名年轻女子艾比急着去赶1:30开往波士顿的火车却错过。因为在酒吧时手包被盗,所以身无分文打算在中央车站门口等到早晨坐车回家。这时,一名同样感到夜晚难熬的小号手主动提供帮助。两人从陌生,到一起经历了一些轶事到敞开心扉,共度了奇妙的一晚。</td>
			</tr>
	  		</table>
		</td>
  	</tr>
</table>

注意:

1.所有的电脑详情页面都照着这两个例子这么写就好

2.本篇仅包含前端页面

另外:由于博客字数限制,本篇文章所展示代码并不全面,仅可供参考之用

本项目的完整代码及其素材已上传至资源,大家自行去下载就好