1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Continuous Image Vertical Scroller

1. Introduction and Example

A regular marquee or vertical scrollermoves a single object through the display area and has to wait until the end has disappeared before being able to start scrolling it through again. This scroller replaces the single object with a series of images and as each image disappears out of the scroll area it is removed from that end of the array of images and readded to the other end ready to come through again. As long as you have enough images to fill the height of the scroller the images will form a continuous loop.

This script does have a few limitations though so we'll cover those first so that you know exactly what you are getting.

  • To start with all the images will be displayed at the same size (both width and height). If the images are not physically the same size then they will all be resized to make them appear the same size. This would use the inefficient method of adjusting the size displayed in the browser window rather than physically resizing the image source.
  • The width of the images must match the width set for the scroller. If the width of the scroller differs from that of the images then the images will again be resized to fit. If the images are scaled then you will want to ensure that they are scaled evenly for both width and height so as to not have the images appear distorted. A better solution is to make sure all the images are the right size to start with.
  • The image width multiplied by the number of images must be greater than the marquee width. The easiest fix for this if there are insufficient images is to just repeat the entries in the image array a second time.
  • The only interaction that this version of the script provides is that when you move the mouse over the scroller the images will stop moving and when you move the mouse off the scroller it will start moving again.
  • You can have multiple scrollers on the same page with this script and can specify different images (and different image sizes) for each. The scrollers all run at the same speed though so moving the mouse over any of them will cause all of them to stop moving.
  • You must supply your own images. The ones I have included in the scrollers on this page are there to illustrate the functionality of the script only and do not form a part of the script.

If those limitations don't put you off from deciding to use this script then the next step is to get the script.

See More About

©2016 About.com. All rights reserved.