6-2作业题疑问

来源：6-2 作业题

安伯伯

2019-03-31 20:42:58

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
	<div class="main" id="main">
		<!-- 选项卡 -->
		<div class="nav" id="nav">
			<ul>
				<li class="active">首页</li>
				<li>点我看看</li>
				<li>会自动的</li>
				<li>我的网站</li>
			</ul>
		</div>
		<!-- 轮播图 -->
		<div class="banner" id="pic">
			<a href="#">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="#">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="#">
				<div class="banner-slide slide3"></div>
			</a>
			<a href="#">
				<div class="banner-slide slide4"></div>
			</a>
		</div>
	</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
	font-family: "Microsoft YaHei";
}

ul{
	list-style: none;
}

.main{
	width: 1002px;
	margin: 20px auto;
}

.nav{
	width: 1000px;
	height: 50px;
	border: 1px dashed #f2f2f2;  /*老师的建议是把border删掉*/
	border-radius: 5px;
}

.nav ul li{
	width: 250px;
	height: 52px;
	float: left;
	line-height: 52px;
	text-align: center;
	font-size: 22px;
	color: #666;
	cursor: pointer;
}

.active{
	background: #FFCC00;
	font-weight: bolder;
	border-radius: 5px;
}

.banner{
	width: 1002px;
	height: 500px;
	position: relative;
}

.banner-slide{
	width: 1002px; /*要插入背景图片，一定要给div设置高度，否则不显示*/
	height: 500px;
	position: absolute; /*相对banner进行定位，使图片层叠在一起*/
	display: none;
}

.slide-active{
	display: block;
}

.slide1{
	background: url("../img/1.jpg") no-repeat;
}

.slide2{
	background: url("../img/3.jpg") no-repeat;
}

.slide3{
	background: url("../img/4.jpg") no-repeat;
}

.slide4{
	background: url("../img/5.jpg") no-repeat;
}

var index = 0,
	timer = null;

function byId(n){
	return typeof(n) === "string"?document.getElementById(n):n;
}

function slideImg(pics, main, lis){
	
	//鼠标滑过时清除定时器
	main.onmouseover = function(){
		if(timer) clearInterval(timer);
	}
	//鼠标移出时，图片自动轮播
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;
			if(index >= pics.length){
				index = 0;
			}
			changeImg(pics,lis);
		},1000)
	}
	//调用onmouseout方法使其进入页面时自动轮播
	main.onmouseout();

	//点击导航栏，切换图片且导航栏高亮
	for(var j = 0; j < lis.length; j++){
		lis[j].id = j;
		lis[j].onclick = function(){
			index = this.id;
			changeImg(pics,lis);
		}
	}
}

//封装一个切换图片及导航高亮的函数，方便调用
function changeImg(pics,lis){
	for(var i = 0; i < pics.length; i++){
		pics[i].style.display = "none";
		lis[i].className = "";
	}
	pics[index].style.display = "block";
	lis[index].className = "active";
}

window.onload = function(){
	var pics = byId('pic').getElementsByTagName('div'),
		main = byId('main'),
		lis = byId('nav').getElementsByTagName('li');
	slideImg(pics, main, lis);
}

一点疑问：

我的实际运行效果中，每个li元素无法和大边框重叠，点评老师的建议是将nav类里面的border去掉，但题目的效果图中导航栏有一个虚线框，li元素也刚好重叠，这样的效果应该怎么设置css呢？
我的js代码这样写有问题吗？window.onload的写法中，是不是要尽量避免声明全局变量？实际开发中，js文件是在head中引入比较好还是在body中引入比较好？因为用window.onload，变量的声明经常要写错。。
问题有点多，辛苦老师解答一下！谢谢。

写回答

1回答