分析 :
1. 创建HTML页面，页面中有一个div标签，div标签内包含一个img标签。
2. body的背景色为黑色；div的类样式为container：设置为居中，加边框，宽度为850px；img的id为pic，宽度
850px;
3. 五张图片的名字依次是0~4.jpg，放在项目的img文件夹下，图片一开始的src为第0张图片。
4. 编写函数：changePicture()，使用setInterval()函数，每过3秒调用一次。
5. 定义全局变量：num=1。
6. 在changePicture()方法中，设置图片的src属性为img/num.jpg。
7. 判断num是否等于4，如果等于4，则num=0；否则num++。
代码实现
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>轮播图</title>
<style type="text/css">
body {
/*background‐color: black;*/ // 设置页面背景 用的css语法
} .
container {
/*居中*/
margin: auto; // 居中
border: 1px solid black; // 边框为1 实线 黑色
width: 850px; // 宽度 - 高度会默认等比例缩放
} i
mg {
width: 850px;
}
</style>
</head>
<body>
<div class="container">
<img src="img/0.jpg" id="pic">
</div>
</body>
<script type="text/javaScript">
//全局变量
var num=1;
//获取图片对象
var picObj = document.getElementById("pic");
//改变图片的src属性
function changePicture() {
//得到图片的src属性，替换它的值
picObj.src = "img/" + num + ".jpg";
//如果图片到了第4张图片，则重新变成第1张，否则就加1
if (num == 4) {
num = 0;
}else {
num++;
}
} /
/每过3秒调用一次
window.setInterval("changePicture()", 3000);
</script>
</html
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
