輪播圖
思路：（利用固定位會脫離文檔流的原理是圖片排一行）給圖片固定定位磁滚，那么聽要有一個相對定位的父親料仗。例子如下：
定時輪播
html的結(jié)構(gòu)層：
<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);
