6-2作业：脚本在head标签中引用，调用页面加载后执行脚本函数，这个应该怎么写？

window.onload应该怎么写？放在什么位置？

金属girl 2018-03-03

源自：项目：JS实现轮播特效 6-2 作业题

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2018-03-04 14:50:27

可以把下面所有代码放在window.onload(){}里面，参考：

就不会出错了，自己测试一下，祝学习愉快~~

收起回答

金属girl 提问者 #1

非常感谢！

2018-03-04 16:03:29

好帮手慕星星 2018-03-04 14:45:30

window.onload可以放在js脚本的最外层，再写里面的内容。

收起回答

提问者金属girl 2018-03-03 14:45:32

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
        <link rel="stylesheet" href="css/css.css">
	<script src="js/javascript.js"></script>
</head>
<body>
	<div class="main" id="main">
		<!-- 选项卡 -->
		<div class="box" id="box">
			<ul>
				<li class="box-active"><a href="javascript:void(0)">首页</a></li>
				<li><a href="javascript:void(0)">贯穿全栈</a></li>
				<li><a href="javascript:void(0)">会自动的</a></li>
				<li><a href="javascript:void(0)">我的网站</a></li>
			</ul>
		</div>

		<!-- 轮播图 -->
		<div class="banner" id="banner">
			<a href="">
				<div class="banner-pg pg1 pg-active"></div>
			</a>
			<a href="">
				<div class="banner-pg pg2"></div>
			</a>
			<a href="">
				<div class="banner-pg pg3"></div>
			</a>
			<a href="">
				<div class="banner-pg pg4"></div>
			</a>
		</div>
	</div>
</body>
</html>

//封装一个getElementById函数
function byId(id){
	return typeof(id)==="string"?document.getElementById(id):id;
}
window.onload=function(){

//定义全局变量
var timer=null,
	index=0,
	main = byId('main'),
	box = byId('box'),
	banner = byId('banner'),
	pics = banner.getElementsByTagName("div"),
	boxLi = box.getElementsByTagName("li"),
	len = boxLi.length;
	// alert(len);
    slidePic();
}
function slidePic(){
	//鼠标停留在页面上，清除定时器
	main.onmouseover = function(){
		if(timer){
			clearInterval(timer);
		}
	}
	//鼠标离开时，设置定时器图片每1秒切换1次
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++;
			if(index>=len){
				index = 0;
			}
			//切换图片
			changeImg(index);
		},1000);
	}
	main.onmouseout();
	//遍历所有选项卡，绑定鼠标点击事件
	for(var i=0;i<len;i++){
		boxLi[i].id = i;

		boxLi[i].onclick = function(){
			index = this.id;
			changeImg(index);
			// return false;
		}
	}
}

//切换图片
function changeImg(){
	for(var b=0;b<len;b++){
		pics[b].style.display="none";
		boxLi[b].className="";
	}
	console.log(index);
	pics[index].style.display="block";
	boxLi[index].className="box-active";
}

// slidePic();

收起回答