The Animation

The last thing we have to do is to actually slide the layer. As you have probably guessed, this is the InitDiapo() function that will put our layer into action:

88: function InitDiapo () {
89: setTimeout ("slideSlide()",1000*pause);
90: }
91:
92: function slideSlide () {
93: position -= vitesse;
94: if (position < 0) position = 0;
95: if (sens==0) {
96:    objs.top = position;
97: }
98: else {
99:     objs.left = position;
100: }
101:
102: if (position == 0) {
103:    document.images['img'].src = tabImg[cpt];
104:    if (Navigateur()=="Netscape") {
105: eval('document.links[0].href="'+tabImgn[cpt]+'";');
106:    }
107:    else {
108:     eval('document.all.l.href="'+tabImgn[cpt]+'";');
109:    }
110:    ChangeImage ();
111: }
112: else {
113:    setTimeout ("slideSlide()",50);
114: }
115: }

This function calls up the slideSlide() function after waiting the required x seconds. This value is defined through the pause variable set when the script starts.

The slideSlide() function alone is responsible for moving the layer. The position variable is changed according to the animation speed (lines 93-94). Depending on the animation direction, one of the layer coordinates is modified: the vertical position if the direction is 0, or the horizontal position if the direction equals 1 (lines 95-100).

If the animation ends (position =0), the image is updated (together with the link pointing to the original image), and the changeImage() function is called up again (lines 102-111). Then the animation just needs to be restarted (line 113).

There you are! Now all you have to do is to choose the images you want, create smaller ones from them, and that's it!