JS实现最简单的轮播图及其原理

轮播图的实现——最基础的原理

方法1（使用setInterval的方法）：
看下网上很多教程，不论是html还是css的部分做的都太过于详细了，所以我把代码都尽量缩到了最简单，只是记录（给自己看）和讲解（给大家看）其中的原理，直接上代码。。。
1，html部分：

<div id="try">//做一个大框把轮播图片放进去即可
<img src="1.png" style="display: block;" />//第一张图片设置显示，另外两张用css中display=‘none’来隐藏起来
<img src="2.png"/>
<img src="3.png"/>
</div>

2，css部分：

#try img{           //选择id为try中的img图片
position: absolute;           //位置设为相对位置，这样图片才会叠加在一起，不然只会按顺序排列，div最好
设置宽高
display: none;隐藏图片
}

3，js部分：

var tray=document.getElementById("try");   //获取id为try的文件
var is=tray.getElementsByTagName('img');    //获取try中的图片
var c=0;
setInterval(function(){            //设置计时器，格式为setInterval（function(）{}，time）
c++;                          //因为获取到的图片是一个数组，为显示后续图片，数组编号+1
if (c==3) {                 //本例中只设置了3个图片，所以第三张图片之后，数组编码重新归零
c=0;
}

for (var i = 0; i < is.length; i++) {     //做一个for循环，使每一个图片的display属性为none，隐藏图
is[i].style.display='none';
}
is[c].style.display='block';          //显示第c张图片
},1000)

方法2（使用其他的方法）：
未完待续。。。