JavaScript中的轮播图

轮播图

思路：（利用固定位会脱离文档流的原理是图片排一行）给图片固定定位，那么听要有一个相对定位的父亲。例子如下：

定时轮播

html的结构层：

<div id='wrap'>
<ul class='box>
<li style="background:'red'"></li>
<li style="background:'green'"></li>
<li style="background:'blue"></li>
</ul>
</div>

css的样式层

ul,li{
list-style: none;
}
#wrap{
width: 300px;
height: 300px;
border: 1px solid #ddd;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.box{
position: absolute;
top: 0;
left: 0;
clear: both;
width: 930px;
}
.box li{
float: left;
width: 300px;
height: 300px;
}

js的行为层

var wrap=document.getElementById('wrap');
var box=document.getElementsByClassName('box')[0];
var li=document.getElementsByTagName('li');
//初始化
for(var i=0;i<li.length;i++){
if (i==0) {
continue;
}
li[i].style.display='none';
}
var num=0;
var timer=setInterval(function(){
num++;
if (num==li.length) {
num=0;
}
for (var i=0;i<li.length;i++) {
li[i].style.display='none'
}
li[num].style.display='block'
},1000);