显示效果为:主页图片每三秒更换一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script>
/*
分析:
1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的 src属性
3.定义一个定时器,每隔3秒调用方法一次
*/
// 修改图片src属性
var number=1;
function fun(){
number++;
if(number>3) number=1;
//获取img对象
var img = document.getElementById("img");
img.src = "img/"+number+".jpg";
}
// 定义定时器
setInterval(fun,3000);
</script>
</head>
<body>
<img id="img" src="img/1.jpg" alt="" width="100%">
</body>
</html>