完美实现八种js焦点轮播图(上篇)
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=document.getElementById('ul');
var aLi_u=oUl.getElementsByTagName('li');
var oOl=document.getElementById('ol');
var aLi_o=oOl.getElementsByTagName('li');
var LiHeight=aLi_u[0].offsetHeight;
var iNow=0;//当前索引
var timer=null;//定时器
for(var i=0;i aLi_o[i].index=i; aLi_o[i].onmouseover=function(){ for(var i=0;i aLi_o[i].className=''; this.className='active'; //建立关系:很重要 iNow=this.index; startMove(oUl,{top:-this.index*LiHeight}); } }; //开定时器 timer=setInterval(toRun,2000); oBox.onmouseover=function(){ clearInterval(timer); }; oBox.onmouseout=function(){ timer=setInterval(toRun,2000); }; //定时函数 function toRun(){ if(iNow==aLi_o.length-1){ iNow=0; }else{ iNow++; } for(var i=0;i aLi_o[i].className=''; } aLi_o[iNow].className='active'; startMove(oUl,{top:-iNow*LiHeight}); } };