<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
div{
width:900px;
height:400px;
margin:0 auto;
}
div img{
width:900px;
height:400px;
}
</style>
<script type="text/javascript">
function init(){
// window.setTimeout(changeImg,2000);//延迟2秒调用一次changeImg方法。
window.setInterval(changeImg,2000);//循环,每隔2秒调用一次changeImg方法。
}
var index = 1;
function changeImg(){
nextImg();
}
function preImg(){
myimg = document.getElementById("myimg");
index--;
if(index < 1){
index = 2;
}
myimg.src = "img/" + index + ".png";
}
function nextImg(){
myimg = document.getElementById("myimg");
index++;
if(index > 2){
index = 1;
}
myimg.src = "img/" + index + ".png";
}
</script>
</head>
<body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()">下一张</button>
</p>
<div>
<img src="img/1.png" id="myimg" />
</div>
</body>
</html>
1,怎么自动调用某个函数(自动轮播)
setInterval(functionName,millisec);
2,当网页加载完成的时候,设置计时调用
onload
为什么要等网页加载完成?
只有网页加载完成了,才可以访问网页上的任何元素!
3,两种控制图片路径的方式
数组
设置固定规范的图片名称