1.需求分析
我们希望在首页完成对轮播图的效果实现：
2.技术分析
获取元素 document.getElementById(“id名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);
指定一个表达式或者一个函数 重复执行时间（毫秒值）
3.步骤分析
第一步：确定事件（页面加载时间onload）
第二步：书写这个函数（设置一个定时操作）
第三步：书写这个定时操作里面的函数
第四步：获取图片的位置
第五步：为该图片设置src属性值
4.代码实现
4.1手动
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
<style>
div{
border: 1px solid white;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i = 0;
function changeImg(){
i++;
//将图片名称修改为 数字.jpg 方便进行 i++操作
document.getElementById("img1").src="./img/" +i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body>
<div>
<input type="button" value="下一张" onclick="changeImg()"/>
<img src="img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>
4.2自动
<html>
<head>
<meta charset="utf-8">
<title>切换图片</title>
<script>
function init(){
setInterval("changeImg()",3000);
}
var i = 0;
function changeImg(){
i++;
//将图片名称修改为 数字.jpg 方便进行 i++操作
document.getElementById("img1").src="./img/" +i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div id="father">
<div id="">
<img src="./img/1.jpg" width="100%" id="img1"/>
<img src="./img/2.jpg" width="100%" id="img1"/>
<img src="./img/3.jpg" width="100%" id="img1"/>
</div>
</div>
</body>
</html>
