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();