自动轮播图(看代码回忆)
1.确定事件：文档加载完成的事件onload
2.事件要触发：init()
3.函数里面要做一些事情
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("img1");
var curIndex = index%3 + 1;
img.src = "../img/"+curIndex+".jpg";
index = index + 1;
}
function init(){
setInterval("changImg()",3000);
}
</script>
</head>
<body onload = "init()">
<img src = "../img/1.jpg" width = "100%" id = "img1" />
</body>
</html>页面的加载顺序问题
如果javascript的一些语句写在函数体外，需要用到下面语句的元素的话，就会出问题
页面的加载顺序是从上往下的，遇到javascript语句会执行，但遇到函数会先不执行。
而javascript语句用到下面语句的id之类的元素的话就会出错，因为还没加载
图片的显示和隐藏
显示img.style.display = "block"
隐藏img.style.display = "none"
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<script>
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "black";
}
</script>
</head>
<body onload = "init()">
<input type = "button" value = "显示" onclick = "showImg()" />
<input type = "button" value = "隐藏" onclick = "hideImg()" />
<img src = "../img/图片.gif" id = "img1">
</body>
</html>