javascript期末大作业电影网站设计HTML

最新推荐文章于 2024-06-20 13:40:39 发布
风云万世
最新推荐文章于 2024-06-20 13:40:39 发布
阅读量550
点赞数 14
文章标签：前端 javascript web3 css
本文链接：https://blog.csdn.net/m0_74223693/article/details/135610245
版权
设计涉及css+html+JavaScript适用于学生期末大作业在线电影网
部分页面解图
html网页制作--电影网站
部分源代码：
<!DOCTYPE html>
<html>
<head>
  <title>电影首页</title>
<link rel="stylesheet" href="css/index.css" />
<link rel="shortcut icon" href="0001.ico" type="image/x-icon"/>
<style type="text/css">
	*{
		list-style-type: none;
		margin: 0;
		padding: 0;
		text-decoration: none;
		
	}
		
	top{
		height: 80px;
		width: 15px auto;
	}
	.topcontent{
		height: 98px;
		width: 100%;
		position: relative;
		margin: 0 auto;
		/* background-color: #ffff00; */
		background: url('img/01.jpg') 
	}
	.logo{
		width: 80px;
		height: 55px;
		position: absolute;
	}
	.search{
		width: 422px;
		height: 42px;
		margin-top: 20px;
		position: absolute;
		left: 380px;
	}
	.search input{
		float: left;
		width: 345px;
		height: 42px;
		border: 1px solid #BA261A;
		border-right: 0;
		color: #bfbfbf;
		font-size: 14px;
		padding-left: 15px;
	}
	.search button{
		float: left;
		width: 50px;
		height: 43px;
		border: 0;
		background-color: #bfbfbf;
		color: #BA261A;
	}
	.childnav{
		width: 360px;
		height: 30px;
		background-color: #ffffff;
		margin-top: 10px;
		border-radius: 15px;
		position: absolute;
		right: 10px;
		top: 20px;
	}
	.register li{
		float: left;
		text-align: center;
		padding-top: 6px;
		width: 80px;
	}
	.register li a:link{
		color: #ff5500;
		text-decoration: none;
	}
	.register li a:hover{
		color: orangered;
		text-decoration: none;
		
	}
	.img{
		height: 900px;
		width: 100%;
		margin-top: 670px;
	}
	 body {
	            margin: 0;
	            padding: 0;
	            width: 100%;
				background:url("img/0000001.jpg")
	        }
	
	        #container {
	            width: 100%;
	            height: 336px;
	            /* background-color: black; */
				background: url('img/01.jpg')
	        }
	
	        #photos {
	            margin: 0;
	            position: absolute;
	            left: 200px;
	            width: 730px;
	            height: 336px;
	        }
	
	        .pictures {
	            position: absolute;
	            width: 730px;
	            height: 336px;
	            list-style: none;
				
	        }
	
	        #arrows {
	            position: absolute;
	            width: 800px;
	            height: 336px;
	            margin-top: 130px;
	            margin-left: -30px;
	        }
	
	        .arrow {
	            font-size: 2.5em;
	            background-color: rgb(144, 144, 144, 0.1);
	            color: white;
	            width: 30px;
	            cursor: pointer;
	        }
	
	        #buttons {
	            position: absolute;
	            margin-top: -10px;
	            margin-left: 560px;
	            z-index: 4;
	        }
	
	        .button {
	            width: 6px;
	            height: 6px;
	            border-radius: 3px;
	            background-color: grey;
	            float: left;
	            margin-right: 6px;
	            cursor: pointer;
	        }
			#top{
				text-align: right;
				border: 1px dotted black;
				width: 100%;
				font-size: 35px;
				background-color: darkgray
				color: aqua;
				
			}
			.banner{
				width: 100%;
				height:60px;
				margin: 0 auto;
				background-color: beige;
			}
				
			.rest{
				text-align: center;
				font-size: 30px;
			}
			.left{
				width:400px;
				height: 450px;
				float: left;
				background-color: white;
				border:3px solid black;
				border-radius: 20%;
			}
			.right{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
			}
			.ret{
				text-align: center;
				font-size: 15px;
			}
			.right2{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right3{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right4{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right5{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right6{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right7{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
				
			}
			.right8{
				width: 200px;
				height: 320px;
				border:3px solid black;
				float: left;
				margin-left: 60px;
				background-color: azure;
			}
			    
</style>
	<script>
	    Date.prototype.format = function (fmt) {
	        var o = {
	            "y+": this.getFullYear, 
	            "M+": this.getMonth() + 1, 
	            "d+": this.getDate(), 
	            "h+": this.getHours(), 
	            "m+": this.getMinutes(), 
	            "s+": this.getSeconds() 
	        };
	        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	        for (var k in o)
	            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	        return fmt;
	    }
	    setInterval("document.getElementById('top').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
	</script>
	<script type="text/javascript">
		function changeStyle(item) {
		  item.style.color = 'red';
		  item.style.fontSize = '24px';
		}
		
		function restoreStyle(item) {
		  item.style.color = 'black';
		  item.style.fontSize = '16px';
		}
		
	</script>
</head>
<body>
	
  <div class="top">
	  <div class="topcontent">
		  <div class="logo">
			  <img src="0001.ico"/>
		  </div>
		  <div class="search">
			  <input type="text" placeholder="请输入电影名"/>
			  <button>搜索</button>
		  </div>
		  <div class="childnav">
			  <ul class="register">
				  <li><a href="index.html">用户注册</a></li>
				  <li><a href="login.html">账号登录</a></li>
				  <li><a href="login.html">退出登录</a></li>
				  <li><a href="relative.html">观影记录</a></li>
			  </ul>
		  </div>
	  </div>
  </div><hr/>
   
<div id="top"></div>
<div id='container'>
    <ul id='photos'>
        <li class='pictures' id='#ffffff' style='z-index: 2;'><img src='img/11.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/11.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/12.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/13.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/14.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/11.jpg' alt="#"></li>
        <li class='pictures' id='#ffffff'><img src='img/12.jpg' alt="#"></li>
		<li class='pictures' id='#ffffff'><img src='img/13.jpg' alt="#"></li>
		<li class='pictures' id='#ffffff'><img src='img/15.jpg' alt="#"></li><hr />
        <div id='arrows'>
            <span class='arrow' title='left'></span>
            <span class='arrow' title='right' style='float: right;'></span>
        </div>
    </ul>
</div>
<div id='buttons'>
    <span class='button' style='background-color: red;'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
    <span class='button'></span>
</div>
  
  <script>
      let count = 0;  
      let FI = null; 
      let timer = null;
      let fullBox = document.getElementById('container');
      let pictures = document.getElementsByClassName('pictures');
      let arrow = document.getElementsByClassName('arrow');
      let button = document.getElementsByClassName('button');
      let percent = 0;
      function fadeIn() {
          FI = setInterval(function () {
              percent += 0.010000; 
              if (percent >= 1) {
                  clearInterval(FI);
              } else {
                  pictures[count].style.opacity = percent;
              }
          }, 10);
          percent = 0;
      }
  
      function pic() {    
          for (let i = 0; i < pictures.length; i++) {
              pictures[i].style.opacity = "0";
          }
          fullBox.style.backgroundColor = pictures[count].id 
          for (let c = 0; c < button.length; c++) { 
              button[c].style.backgroundColor = 'grey';
          }
  
          button[count].style.backgroundColor = 'red';
      }
  
      
      showtime();
  
      function showtime() {
          timer = setInterval(show, 4000)
      }
  
      function show() {
          count++;
          if (count > pictures.length - 1) {
              count = 0;
          }
  
          fadeIn();
          pic();
      }
      
      for (let i = 0; i < arrow.length; i++) {
          arrow[i].onmouseover = function () {
              clearInterval(timer);
          };
          arrow[i].onmouseout = function () {
              showtime();
          };
          arrow[i].onclick = function () {
              if (this.title === 'left') {
                  count--;
                  if (count < 0) {
                      count = pictures.length - 1;
                  }
              } else {
                  count++;
                  if (count > pictures.length - 1) {
                      count = 0;
                  }
              }
              fadeIn();
              pic();
          }
      }
      
      for (let i = 0; i < button.length; i++) {
          button[i].index = i;
          button[i].onmouseover = function () {
              clearInterval(timer);
              count = this.index;
              fadeIn();
              pic();
          };
          button[i].onmouseout = function () {
              showtime()
          };
      }
  	document.getElementById('top').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');
  </script>
  <h2><div class="banner">
  <div class="rest">今日热榜推荐</div></div></h2><br /><br />
  <div class="left"><img src="img/animal.gif"/></div>
  <div class="right">
	  <img src="img/17.jpg"/><div class="ret"><a href="dianying.html">中国机长</a></div>
  </div>
  <div class="right2"><img src="img/005.jpg"/><div class="ret"><a href="fenlei.html">大红灯笼高高挂</a></div></div>
  <div class="right3"><img src="img/004.jpg"/><div class="ret">再会长江</div></div>
  <div class="right4"><img src="img/007.jpg"/><div class="ret">似火流年</div></div>
  <div class="right5"><img src="img/006.jpg"/><div class="ret">投名状</div></div>
  <div class="right6"><img src="img/001.jpg"/><div class="ret">中国合伙人</div></div>
  <div class="right7"><img src="img/002.jpg"/><div class="ret">阳光普照</div></div>
  <div class="right8"><img src="img/003.jpg"/><div class="ret">小哪吒</div></div>
<div class="img"><img src="img/11111.png"/></div>
	   
</body>
</html>