使用JavaScript制作简单的轮播图
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script type="text/javascript">
/*
分析:
1. 在页面上使用img标签展示图片。
2. 定义一个方法,修改图片对象的src属性。
3. 定义一个定时器,每隔3s调用方法一次。
*/
//修改图片scr属性
var number = 1;
function fun() {
number++;
//判断number是否大于3
if (number > 3) {
number = 1;
}
//获取img对象
var img = document.getElementById("img");
img.src = "img/banner_" + number + ".jpg";
}
//2.定义定时器
setInterval(fun, 3000);
</script>
</body>
</html>
使用的三张轮播图片: