Creating a seamless looping image in Javascript

My boss is making me do this and I'm not sure how to do it in Javascript.

What I need to do is have 3 picture on a html page, scroll off the page upwards.

So when the user clicks Next those three picture scroll off (disappearing under the STUFF),and are replaced with three more images. And when you click on those images directly it changes the contents of a textbox (In this case labeled REPLACE ME.) I'm not even sure what to google at this point. I understand the REPLACE ME operation. But I'm not sure how to make a image scroll away and be replaced by another (The images loop after press next 5 times.) I think Jquery will make it easier but most of the tutorials aren't exactly what I'm looking for. Does anyone know a tutorial that would cover something l开发者_运维百科ike this.

A asset http://www.loopmedia.com/images/newsletter/SlideUpAndSlideUpV2.png

Ok, so if you want the theory behind it this is it... sans code:

You have to have a div which is the container. This is as wide and high as you need the "viewport" of the images to be. This needs to be overflow: hidden; position: relative;.

Inside of this you then need a div which is as wide as the images viewport (as above) but as high as ALL THE CONTENT. So that is as high as all of the 5 sets of images in the scroller. This needs to be position: absolute; top: 0; left: 0;.

Inside of this inner div you need to place the 5 divs that will contain the images, each on top of each other, as normal.

So... now when you click 'next' you need to animate() (jquery) the inner div's top value to be -HEIGHT_OF_1_SET_OF_IMAGES. This gives the illusion that the pictures are scrolling up off the page.

When this is finished (see jquery's animate callback function) you need to move the div thats now hidden off the top of the page (the first set of images) to the bottom by using the appendTo() function to append it to the end of the inner div. At the same time you need to set the top value to 0 again. Thus you start the loop again.

Hope this makes sense. :) Any questions give me a shout.

I think you want something like this or this

I'm sure there are plugins out there that can do that, all you need is search.

If you want to do it yourself though, that's how I'd do it.

Use a sprite, with the first and last images are the same (for overlapping), then simply indefinitly animate the top property of the sprite until it reaches a certain value (the last image has completed scrolling), and when that happens, reset the top value, and go again.