案例：轮播图

案例需求：

实现每过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;
             850px;
        }

        img {
             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>

案例素材：