其实学习轮播图十分的简单，我们首先先来理解它的原理结构，这样我们后面再遇见做轮播图的时候就会得心应手，就像我之前读过一个故事，这个故事讲的是：从前，有两个饥饿的人得到了一位长者的恩赐：一根鱼竿和一篓鲜活硕大的鱼。其中，一个人要了一篓鱼，另一个人要了一根鱼竿，得到鱼的人高高兴兴的大吃大喝了几天，最后鱼都吃光了，不久，他便饿死在空空的鱼篓旁。另一个人靠着鱼杆天天打鱼，开始了捕鱼为生的日子，几年后，他盖起了房子，有了家庭、子女，有了自己建造的渔船，过上了幸福安康的生活。就像我们在学习知识一样，不能只看着眼前的这“一蒌鱼”而放弃鱼竿。
首先我们先看一个特别简单的轮播图例子。
这个简单轮播图的原理就是：利用定时器每过一秒切换一下图片。
在同目录下创建了一个imgs文件夹，里面放了4张图片分别是1.png 2.png 3.png 4.png
这只是特别简单的轮播图，所以没有太多的样式，我认为我们先从简单的做起，然后等我们技术成熟的时候，再把轮播图打扮一下，让它变的好看。
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style>
div {
border: 1px solid red;
width: 400px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
</head>
<body onload="init()">
<div>
<img id="lunbotu" src="../imgs/1.png" width="100%" height="100%" />
</div>
<script>
function init(){
setInterval("changeImg()", 1000);
// 调用changeImg方法,1000毫秒,1000毫秒就是1秒钟调用一次
}
var i = 1;
function changeImg(){
i++;
document.getElementById("lunbotu").src = "../imgs/" + i + ".png";
// 需要注意的地方是[= "../imgs/" + i + ".png"; ]这里是轮播文件的前缀和后缀,文件地址写错后,页面将无法实现轮播效果
if (i == 4) { // 最后一张图的时候,重置i,这样i++后又是从1开始了,完成轮播
i = 0;
}
}
</script>
</body>
</html>
