如果想做一个全屏的轮播，应该怎么控制container这个div的大小或者图片的大小，使之适应不同浏览器不同电脑呢
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>以太工作室</title>
<link href="css/top.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/picture.js"></script>
</head>
<body>
<div id="top">
<div>
<img src="img/logo.jpg" height="100px">
</div>
<ul>
<li><a href="html/gaikuang.html">工作室概况</a>
<ul>
<li><a href="#">成员信息</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">团队合租</a></li>
</ul>
</li>
<li><a href="#">内部机构</a>
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后台</a></li>
<li><a href="#">视频编辑</a></li>
</ul>
</li>
<li><a href="#">学术研究</a>
<ul>
<li><a href="#">前端技术</a></li>
<li><a href="#">后台交流</a></li>
<li><a href="#">视频</a></li>
</ul>
</li>
<li><a href="#">项目联系</a></li>
</ul>
<div>
<div style=""></div>
<div>考生·在校生·教职工
<img src="img/59f532dba2f2d584e683e7fcf5aff005.png" height="20"></div>
<div>信息门户
<img src="img/19e7f62b1b56b4f4348a3e2267967b74.png" height="20"></div>
<div>OA系统
<img src="img/4f3c6bc9e42131eb7e7909326bfa8c57.png" height="20"></div>
<div>信息公开
<img src="img/8d270c434aa4fc40ba17d13f0497035a.png" height="20"></div>
<div>En</div>
<div>
<form>
<input id="research" type="text" value="搜索" /></form>
</div>
</div>
</div>
<div id="wpic">
<div id="wleft">
<a href="#">
<div id="wlxpic">成员培养</div>
</a>
<a href="#">
<div id="wlxpic">招员纳新</div>
</a>
<a href="#">
<div id="wlxpic">小组讨论</div>
</a>
<a href="#">
<div id="wlxpic">作品展示</div>
</a>
</div>
<div id="wmiddle">
<p>新闻通知</p>
<ul>
<li>
<a href="#"> <span style="float: left;color: #15C7A7;">|</span>新闻一</a>
</li><span>2015-5-13</span>
<li>
<a href="#"> <span style="float: left;color: #15C7A7;">|</span>新闻一</a>
</li><span>2015-5-13</span>
<li>
<a href="#"> <span style="float: left;color: #15C7A7;">|</span>新闻一</a>
</li><span>2015-5-13</span>
<li>
<a href="#"> <span style="float: left;color: #15C7A7;">|</span>新闻一</a>
</li><span>2015-5-13</span>
<li>
<a href="#"> <span style="float: left;color: #15C7A7;">|</span>新闻一</a>
</li><span>2015-5-13</span>
</ul>
</div>
<div id="wright">
<a href="#">
<div id="wrxpic">信息公告</div>
</a>
<a href="#">
<div id="wrxpic">公共服务</div>
</a>
<a href="#">
<div id="wrxpic">交流合作</div>
</a>
<a href="#">
<div id="wrxpic">成就展示</div>
</a>
</div>
</div>
<div id="container">
<div id="list" style="left: -1920px">
<img src="img/净月彩虹.jpg">
<img src="img/cd8edb2d6263e99c1b590cfeadd58db6.jpg">
<img src="img/本部图书馆.jpg">
<img src="img/本部首面.jpg">
<img src="img/6f9eae6d32f743d460daf81e868cecbd.jpg">
<img src="img/本部图书馆.jpg">
<img src="img/cd8edb2d6263e99c1b590cfeadd58db6.jpg">
</div>
<a href="javascript:void(0)" id="prev"><</a>
<a href="javascript:void(0)" id="next">></a>
</div>
<div id="footer">
<p><a href="#">联系我们</a> | <a href="#">加入我们</a></p>
<p>版权所有© 以太工作室 地址: 长春市净月大街2555号 邮编130000</p>
</div>
</body>
</html>
以下是js部分
function gid(id) {
return document.getElementById(id);
}
window.onload = function() {
var container= gid("container");
var list = gid("list");
var prev = gid("prev");
var next = gid("next");
var timer;
//位移函数,每次移动offset
function animate(offset) {
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
list.style.left = check(parseInt(list.style.left)) + 'px';
}
//检测函数 保证图片轮播正常
function check(left) {
if (left > -1920) return -7680;
if (left < -7680) return -1920;
}
//点击箭头切换页面，调用animate函数
prev.onclick = function() {
animate(1920);
}
next.onclick = function() {
animate(-1920);
}
// 定时器 自动播放效果，3秒自动播放一次
function play() {
timer = setInterval(next.onclick, 3000);
}
function stop() {
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
以下是css：
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
font-family: "微软雅黑";
height: 620px;
}
#container {
width: 100%;
height: 620px;
overflow: hidden;
position: relative;
top: -310px;
left: 0px;
z-index: -3;
}
#list img {
width: 1920px;
height: 620px;
float: left;
}
#list {
position: absolute;
width: 9600px;
}
.arrow {
height: 35px;
width: 35px;
/*opacity: 0.3;*/
background-color: rgba(0, 0, 0, 0.3);
display: none;
/*display: block;*/
color: white;
text-decoration: none;
font-size: 30px;
text-align: center;
position: absolute;
font-weight: bold;
z-index: 2;
}
#prev {
left: 5px;
top: 0;
bottom: 0;
margin: auto;
}
#next {
right: 5px;
top: 0;
bottom: 0;
margin: auto;
}
.arrow: hover {
background-color: rgba(0, 0, 0, 0.7);
}
#top {
height: 100px;
background: #333;
/*opacity: 0.3;*/
color: whitesmoke;
font-weight: bolder;
background-color: rgba(0, 0, 0, 0.5);
}
.logo {
float: left;
margin: 0;
z-index: 1000;
}
#top ul li {
float: left;
list-style: none;
height: 100px;
/*width:10%;*/
margin: 0;
border-right: 1px solid white;
text-align: center;
display: block;
line-height: 100px;
}
/*#top ul{
position: relative;
}*/
#top ul li ul {
/*position: absolute;*/
left: 276px;
/*height: 100px;*/
line-height: 0px;
text-align: center;
padding-left: 0px;
display: none;
}
#top ul li ul li {
float: none;
/*width: 100%;*/
height: 37px;
line-height: 25px;
}
#top ul li ul li a {
color: black;
}
#top ul li ul li a:hover {
/*width: 50px;*/
height: 31px;
color:blanchedalmond;
padding-top: 5px;
}
#top ul li:hover ul {
display: block;
background-color: rgba(255, 255, 255, 0.5);
}
#top a {
text-decoration: none;
color: black;
display: block;
padding: 0px 18px;
color: white;
}
#top a:hover {
color: white;
background-color: rgba(59, 160, 247, 0.5);
}
.Xss {
float: right;
margin-top: 12px;
}
.Xselect {
margin-top: 5px;
float: left;
border: 1px solid white;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 10px;
}
.select {
position: absolute;
top: 70px;
right: 20px;
}
#research {
color: #fffefe;
height: 20px;
width: 150px;
background: rgba(0, 0, 0, 0);
padding: 5px;
margin-bottom: -15px;
}
#wpic {
width: 815px;
height: 205px;
/*background-color: black;*/
position: relative;
top: 160px;
z-index: 2;
margin-left: auto;
margin-right: auto;
}
#wleft {
width: 204px;
/*margin-left: 10px;*/
text-align: center;
line-height: 100px;
color: white;
}
#wleft a {
color: white;
}
#wlxpic {
width: 100px;
height: 100px;
background-color: rgba(18, 169, 226, 0.7);
float: left;
margin-top: 2px;
margin-right: 2px;
}
#wlxpic:hover {
background-color: rgba(72, 68, 68, 0.6);
color: white
}
#wright {
width: 204px;
float: right;
margin-top: -102px;
line-height: 100px;
color: white;
text-align: center;
}
#wrxpic {
width: 100px;
height: 100px;
background-color: rgba(18, 169, 226, 0.7);
float: right;
margin-top: 2px;
margin-right: 2px;
}
#wright a {
color: white;
}
#wrxpic:hover {
background-color: rgba(72, 68, 68, 0.6);
color: white
}
#wmiddle {
width: 389px;
height: 202px;
margin: 1px;
background-color: rgba(255, 255, 255, 0.7);
float: left;
margin-top: -100px;
margin-left: 8px;
margin-right: 5px;
border-top: 2px solid #12A9E2;
}
#wmiddle p {
font-weight: bold;
color: #1C71CA;
font-size: 18px;
line-height: 25px;
margin-left: 10px;
margin-top: 5px;
}
#wmiddle ul {
list-style: none;
margin-left: 20px;
margin-top: 20px;
}
#wmiddle a {
display: block;
color: black;
line-height: 29px;
text-decoration: none;
}
#wmiddle a:hover {
color: #0A89D4;
}
.span2 {
display: block;
float: right;
color: blue;
margin-right: 10px;
line-height: 20px;
margin-top: -24px;
}
.span1 {
float: left;
font-weight: bolder;
margin-right: 5px;
line-height: 25px;
}
#footer {
height: 70px;
z-index: 2;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
position: fixed;
bottom: 0px;
}
#footer p {
text-align: center;
color: white;
line-height: 28px;
}
#footer a {
text-decoration: none;
color: white;
}
#footer a:hover {
color: #0A89D4;
}
