JavaScript学习（四）——轮播图的实现
实现轮播图的步骤：
- html页面，上面要能展示一张图片
- js要有一个能够改变图片的方法，可以使用getElementById获取对象，修改src属性
- 定时器去执行改变图片的方法
选择几张图片导入项目
定义img标签
<img src="img/1.jpg" id="img" width="100%">
改变突变属性的方法
var num =1;
function changeImg() {
num++;
if(num==4)
num=1;
var img = document.getElementById("img");
img.src = "img/" + num +".jpg";
}
定时器
setInterval(changeImg,3000);
通过该浏览器打开，可以看到网页在轮播图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/1.jpg" id="img" width="100%">
<script>
var num =1;
function changeImg() {
num++;
if(num==4)
num=1;
var img = document.getElementById("img");
img.src = "img/" + num +".jpg";
}
setInterval(changeImg,3000);
</script>
</body>
</html>
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
