提问，关于Window.onload的
我在页面写了window.onload，但是由于我用了dom结点中的getElementById方法导致加载不了，解决方法说是延迟加载，那这样的话用户体验不就很差了吗？为什么要求要把<script></script>标签放在<head>标签中呢？
正在回答 回答被采纳积分+1
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript实现轮播特效效果作业</title>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!--导航条-->
<div class="nav" id="nav">
<a href="#" name="dots">
<div class="navDots dotActive">首页</div>
</a>
<a href="#" name="dots">
<div class="navDots">点击看看</div>
</a>
<a href="#" name="dots">
<div class="navDots">会自动的</div>
</a>
<a href="#" name="dots">
<div class="navDots">我的网站</div>
</a>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<a href="#" name="img">
<div class="bannerImg Img1 imgActive"></div>
</a>
<a href="#" name="img">
<div class="bannerImg Img2"></div>
</a>
<a href="#" name="img">
<div class="bannerImg Img3"></div>
</a>
<a href="#" name="img">
<div class="bannerImg Img4"></div>
</a>
</div>
</div>
</body>
</html>
script.js：
window.onload=function(){
//封装document.getElementById()方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
var banner=byId("banner"),
pics=banner.getElementsByTagName("div"),
timer=null,
picsLen=pics.length,
index= 0,
nav=byId("nav"),
dots=nav.getElementsByTagName("div");
function slideImg(){
var main=byId("main");
//鼠标滑过时，清除定时器
main.onmouseover=function(){
if(timer){ clearInterval(timer);}
}
//鼠标离开时，启动定时器
main.onmouseout=function(){
//timer是设置间歇调用返回的ID，用于清除定时器时调用
timer=setInterval(function(){
index++;
if(index>=picsLen){
index=0;
}
changeImg();
},1000);
}
main.onmouseout();
//点击导航条切换图片
for(var j=0;j<dots.length;j++){
dots[j].id=j;
dots[j].onclick=function(){
index=this.id;
changeImg();
}
}
}
//切换图片的函数封装
function changeImg(){
for(var i=0;i<picsLen;i++){
pics[i].style.display="none";
dots[i].className="navDots";
}
pics[index].style.display="block";
dots[index].className="navDots dotActive"
}
}
style.css：
html,body,head,div,a,p{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
body{
font-family:Microsoft YaHei;
}
/*导航条样式*/
.nav{
width: 1200px;
heigth:60px;
margin:20px auto;
}
.navDots{
height: 60px;
width: 300px;
float:left;
overflow:hidden;
text-align:center;
line-height: 60px;
background: #fff;
color:#666;
font-size: 22px;
}
.dotActive{
background-color:#ffcc00;
font-weight:bold;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;;
}
/*图片样式*/
.banner{
height: 460px;
width: 1200px;
overflow:hidden;
margin:0 auto;
}
.bannerImg{
height: 460px;
width: 1200px;
display:none;
}
.imgActive{
display:block;
}
.Img1{
background:url("../img/img1.jpg") no-repeat;
}
.Img2{
background:url("../img/img2.jpg") no-repeat;
}
.Img3{
background:url("../img/img3.jpg") no-repeat;
}
.Img4{
background:url("../img/img4.jpg") no-repeat;
}
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星