列:使用JavaScript实现轮播图
技术
- 获取元素 document.getElementById(“id 名称”)
- 事件(onload) 页面加载完时调用此方法
- 定时操作:setInterval(“changeImg()”,3000);
实现方法
- 第一步:确定事件(onload)并为其绑定一个函数
- 第二步:书写绑定的这个函数
- 第三步:书写定时任务(setInterval)
- 第四步:书写定时任务里面的函数
- 第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性)
实现
JavaScript代码
<script>
function init() {
//书写轮图片显示的定时操作
setInterval("changeImg()", 3000);
}
var i = 0
function changeImg() {
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src = "../img/" + i + ".jpg";
if (i == 3) {
i = 0;
}
}
</script>
html
<body onload="init()">