案例：轮播图
案例需求：
实现每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。
案例效果：
案例分析：
-
创建HTML页面，页面中有一个div标签，div标签内包含一个img标签。
-
body的背景色为黑色；div的类样式为container：设置为居中，加边框，宽度为850px；img的id为pic，宽度
850px;
-
五张图片的名字依次是0~4.jpg，放在项目的img文件夹下，图片一开始的src为第0张图片。
-
编写函数：changePicture()，使用setInterval()函数，每过3秒调用一次。
-
定义全局变量：num=1。
-
在changePicture()方法中，设置图片的src属性为img/num.jpg。
-
判断num是否等于4，如果等于4，则num=0；否则num++。
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.container {
/* 居中 */
margin: auto;
border: 1px solid black;
width: 850px;
}
img {
width: 850px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/0.jpg" id="pic">
</div>
</body>
<script>
// 全局变量
var num = 1;
// 获取图片对象
var picObj = document.getElementById("pic");
// 改变图片的src属性
function changePicture() {
// 得到图片的src属性，替换它的值
picObj.src = "img/" + num + ".jpg";
// 如果图片到了第四张图片，则重新编程第一张，否则就加1
if(num == 4) {
num = 0;
} else {
num++;
}
}
//每过3秒调用一次
window.setInterval("changePicture()", 3000);
</script>
</html>
案例素材：
