Explore JavaScript----My understanding of the gradient carousel

For a person who does not have a foundation for programming, I often want to be told that when we see an effect, how to logically analyze its behavior, and I myself need to strengthen this aspect of self-reflection, for a carousel I see this, auto play is bound to have a timer, While playing a frame (assuming the gradient is real), the gradient must also have a timer.

1: People control a carousel via the mouse to automatically play AutoPlay.

A. When the mouse moves into the range of the carousel graph, the carousel stops playing automatically, and the reverse starts to play automatically:

Obox.onmouseover=function () {

Clearinterval (play);

}

Obox.onmouseout=function () {

AutoPlay ();

}

B. When the mouse moves to a button, the frame is played: (Here is the thought: there is a link between the inevitable button and the diagram to control each other, it is the parameter)

for (Var i=0;i<anum.length;i++) {

anum[i].index=i;//Add a "number card" attribute for each button;

Show (This.index)

}

2: AutoPlay controls the playback of each frame show ():

function AutoPlay () {

Play=setinterval (

index++;

Index>=anum.length && (index=0);//When playing to the last frame, 2 seconds and then + + becomes the Anum.length frame (empty), let it play again

Show (index);

},2000)

AutoPlay ();

3: Play Show () per frame, each time the transparency of all frames is changed to 0, also mark a specific button, and then let the specific frame of the degree of increase to opacity=1;

Function Show (a) {//need to play a specific frame generated from AutoPlay, mouse over button, control by parameters

for (Var i=0;i<ali.length;i++) ali[i].style.opacity= "";//Not compatible

for (Var i=0;i<anum.length;i++) {

Anum[i].classname= "";

}

Anum[a].classname= "Current";

var alpha=0;//is best declared in function header

Timer=setinterval (function () {

alpha++2;

alpha>100 && (alpha=100);

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

alpha==100 && clearinterval (timer);

},20)

}

Explore JavaScript----My understanding of the gradient carousel