Let me now explain what have I done & how does it work.

• As you see, there are altogether 3 images. One of them is the "default" image, so to say, - this one doesn't move. I have named this DIVISION as "dzigns0". I have dynamically positioned it at LEFT:25; TOP:160 (By all means change it to whatever position that suits you.)
• For the TWO scrolling images (dzings1 & dzigns2 respectively), I had to create two SETs of scripts, each with 3 function calls. To differentiate, each function has a suffix of 1 or 2, denoting two Sets.
  
  • The first of these is "function init()". As with my other DHTML scripts, this one sniffs the Browser - that is, it determines the Browser type. In addition it also initiates execution of the NEXT function.
  • The next function referred to above is called "function slide()". As the name implies, this is what makes the image slide!! :) :) What's important here, is to remember that the Final LEFT position MUST be same as the left position of the default image. Therefore, in this case, the Left position of both the scrolling images are 25, as with the default image. You MUST also decide how far the images are going to scroll. The point is, if we want the "animation" to seem as if one image is sliding out & the next one coming in, then the scrolling should continue well into a Negative value. For my images, which are 150 x 150, I find a figure of "-400" is perfect. This is the position specified within the script. When placing the images within the body, the start position of each image will also have to be same. Which means, Images should be inserted as follows:
        <DIV ID="dzigns1" STYLE="position:abosolute; left:-400 ..... etc.....">
        <IMG SRC="dzigns1.gif" .. etc... ></DIV>
    
  • The last function of each set is a timer & goes like this "function timer()". So what do these do? These 'instruct' the browser when to start executing the "function init()" call, through the standard "setTimer('this is where the name of the function to be executed goes - in this case INIT', 'then the time to start in milliseconds')"
• While setting the TIME for each timer function, what's important to remember is that the script execution should start in such a way that the second image starts scrolling ONLY after the first one has moved out. Therefore, second one should start later. In the case of this script, it is set at 6000 & 18000 milliseconds respectively. However, if you change the STEP & SPEED of the scroll, you'll have to change the TIME as well - otherwise, the images will tend to overlap. I have set the STEP & SPEED at -2 pixels & 80 milliseconds respectively. Don't worry, if you must change these. Just play around with the TIME setting for a while & you'll get it right. It's a bit of calculation OR even TRIAL & ERROR !!
• So, in a nutshell, how does it work? The TIMER function is executed on body load. This in turn executes the Initialization (function init) process which then calls upon the Function Slide & the whole thing is repeated - thus the Animation continues!!

Just a point to remember - put the Images that are to scroll right at the bottom of the page. Since Older Browsers will ignore the CSS POSITIONING, the page will appear as per the flow of the text/Images in the page. So the default will remain where you've kept it & the other two will go right at the bottom.

One more option for you - although the script is available for you to "Cut-n-Paste", if you wish you can CLICK HERE to download the Zipped Bundle for easier understanding!