1、需求分析
主页图片能有轮播效果
2、步骤分析
第一步、确定事件(onload)并为其绑定一个函数
第二步、书写绑定的函数
第三步、书写定时任务(setInterval)
第四步、书写定时任务里的函数
第五步、通过变量的方式,进行循环(获取轮播图的位置,并设置src属性)
3、代码实现
JS代码:
<script>
function init(){
//轮播图显示的定时操作,3秒执行一次changImg函数
setInterval("changeImg()",3000);
}
//书写函数
var i=0;
function changeImg(){
i++;
//获取图片位置并设置src值
document.getElementById("luobuImg").src="img/lunbo"+i+".png";
//总共六张,循环结束重新循环
if(i==6){
i=0;
}
}
</script>
html代码:(并在指定位置定义id)
<body onload="init()">