一、< img /> 标签
用来显示图片的标签，< src /> 属性用来设置图片来源。
< img src=“img/IMG_8028.PNG” />
二、< script />标签
这里开始写js代码，这个代码用来控制网页上面html标签的逻辑。 俗称 DOM控制 。
.js文件中： 返回一个对应的标签对象：
document.getElementById(“对应html中标签的ID值”)
三、工程代码
1. index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Picture 1020</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div id="wrapper">
<div class="header">
<div class="logo">
Lay-Z
</div>
</div>
<div class="main">
<div id="pictures">
<img src="img/zyx(1).JPG" />
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
2. main.css：
body{
margin: 0;
}
.logo{
font-size: 20px;
font-weight: bolder;
padding: 8px;
color: purple;
background-color: skyblue;
}
.main #pictures img{
width: 80%;
}
3. main.js：
// 获取容器
var pics=document.getElementById("pictures");
var n=2;
// 设置时钟控件，前面为一个函数，后面时间间隔以ms为单位
setInterval( function(){
pics.innerHTML = "<img src='img/zyx("+n+").JPG' />";
n++;
if(n==7){
n=1;
}
}, 5000);
