how to offset the images in the thumbnail panel with next and prev buttons, using core javascript

I am in the process of building a photo gallery - a simple one which has a div with the large-sized image, and a div below this to have say 5 thumbnail images. This lower div would then have a left and right arrow images appropriately placed, which upon clicking will offset the thumbnail container and brin开发者_C百科g in the next 5 thumbnails. And ofcourse, on clicking the thumbnail, the large image in the div above would also change to reflect the correct image.

I know this is simple, and better galleries can be built using libraries like jquery etc.. but I am in the process of learning Javascript, and want to learn it the hardway instead of using those excellent libraries right away.

I am facing issues in developing the "offsetting" part. How do i keep a track of the first and last thumbnails contained in the thumbnail container, so that the left and right arrow keys can offset and bring the thumbnails appropriately?

Also, please guide me to any resources that let me develop such thumbnail based galleries without using any libraries like jquery. I do not want any fancy effects/ slideshow stuff, just a simple elegant static gallery would do.

Thanks!

You can use element.firstChild and element.lastChild to find the first and last child (thumbnail) inside your div.