探索javascript----我对渐变轮播图的理解

对于一个没有编程基础的人来说，我时常希望能有人告诉我，当我们看到一个效果的时候，该怎样有条理地分析出它的行为，而我自己有必要加强这方面的 自省，对于一个轮播图我是这样看的,自动播放必然带有一个定时器，而播放某帧（若假设为渐变为实），渐变就必然也有一个定时器。

1：人通过鼠标控制一个轮播的自动播放autoPlay。

a.当鼠标移入轮播图范围的时候，轮播图停止自动播放，反之开始自动播放：

oBox.onmouseover=function(){

clearInterval(play);

}

oBox.onmouseout=function(){

autoPlay();

}

b.当鼠标移到某按钮时，就播放该帧：（这里是这样思考的：必然按钮和图之间有一种联系来互相控制，它就是参数）

for(var i=0;i<aNum.length;i++){

aNum[i].index=i;//为每一个按钮添加一个“号码牌”属性；

show(this.index)

}

2：自动播放控制着每帧的播放show()：

function autoPlay(){

play=setInterval(

index++;

index>=aNum.length && (index=0);//当播放到最后一帧，2秒后又++变为第aNum.length帧（空）,就让它重头播放

show(index);

},2000)

autoPlay();

3：每帧的播放show()，每一次都先让所有帧都透明度变为0，也标记特定按钮，然后让特定帧实度渐增至opacity=1;

function show(a){  //需要播放来自自动播放产生的、鼠标移至按钮产生的特定帧，靠参数控制

for(var i=0;i<aLi.length;i++) aLi[i].style.opacity="";//未做兼容

for(var i=0;i<aNum.length;i++){

aNum[i].className="";

}

aNum[a].className="current";

var alpha=0;//最好在函数头声明

timer=setInterval(function(){

alpha++2;

alpha>100 && (alpha=100);

aLi[a].style.opacity =""+alpha/100;

alpha==100 && clearInterval(timer);

},20)

}