<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单轮播图</title>
</head>
<body>
<img src="img/banner_1.jpg" id="img" width="100%"/>
<script>
//轮播图的数量初始化为1
var number=1;
function fun(){
//每更换一个图片number加一
number++;
//判断轮播图的数量,这个案例以3个图片为例
if(number >3){
number=1;
}
var img=document.getElementById("img");
img.src="img/banner_"+number+".jpg";
}
//循环定时器,每3秒换一次图片
setInterval(fun,3000);
</script>
</body>
</html>