简单的图片轮播

起初学学JS，总想用最简单的方法，写出一个图片轮播效果。于是做了下面这个，希望大家多多指教！

<div class="mid" id="minpic">
<ul>
<li style="opacity: 1;"><a href="#"><img src="图片地址"/></a></li>
<li><a href="#"><img src="图片地址"/></a></li>
<li><a href="#"><img src="图片地址"/></a></li>
</ul>
</div>

css:要注意div 是相对定位（他的大小和图片的大小一样），li是绝对定位（大小和div一样）。

JS代码：

window.onload=function(){
var oMid=document.getElementById('minpic');
var oUl=oMid.getElementsByTagName('ul')[0];
var aLi=oMid.getElementsByTagName('li');
var iNow=0;
var i=0;
var timer=null;
function tab() {
iNow++;
for (i=0;i<aLi.length;i++) {
aLi[i].style.opacity='0';
aLi[i].style.filter='alpha(opacity:0)';
}
if(iNow==aLi.length)
{
iNow=0;
}
aLi[iNow].style.opacity='1';
aLi[iNow].style.filter='alpha(opacity:100)';
}
timer=setInterval(function(){
tab();
},3000);
oMid.onmouseover=function(){
clearInterval(timer);
};
oMid.onmouseout=function(){
timer=setInterval(function(){
tab();
},3000);
};
};

没有做按钮效果，如有错误请指出。