window.setInterval(code,millisec)按照指定的周期(间隔)来执行函数或代码段。
参数1:code必须。执行的函数名或者执行的代码段
参数2:millisec必须。间隔时间,即周期。单位毫秒。
window对象提供的都是全局函数,调用函数时可将window省略。
第一步:确定事件(onload)并为其绑定一个函数
第二步:编写事件触发函数
第三步:编写定时任务(setInterval)
第四步:编写定时任务里面的函数
第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.images {
width: 500px;
height: 500px;
margin: auto;
border: 1px solid red;
}
</style>
<script>
//页面加载完调用init函数
window.onload = init;
function init() {
//启用定时器
window.setInterval("changImg()",2000);
}
var i = 1;
function changImg() {
i++;
document.getElementById("img").src = "images/"+i+".jpg";
if(i > 24) {
i = 0;
}
}
</script>
<body>
<div class="images">
<img src="images/1.jpg" id="img">
</div>
</body>
</html>