Web Developer Class: Build Your Own JavaScript Content Rotator

By Curtis Dicken

The Variables

There are no arrays or complex variables within this project. Instead we have five simple variables that track the various aspects of the rotator. First, we need to define the boundaries for the rotator. The contentAreas variable defines the number of content areas that we have to rotate through and the changeDelay variable defines the delay (in milliseconds) between changes of content.

The other three variables are used to track the state of the content rotator. The contentIndex variable keeps track of which content area is currently being displayed. The continueRotation variable is a flag that tells us when content rotation is on and off. The rotationInProgress variable keeps track of when we are within the delay window after setTimeout is used and before the rotateContent function is actually executed. You'll see why this is necessary below.

Function - rotateContent

This function handles the actual rotation of the content. The best way to explain how this function works is to walk through it step by step:
  1. We first check to see if the rotation is currently on or off using the continueRotation flag.
  2. If we are continuing rotation we do the following:
    1. Turn off the current content area using the contentIndex variable to figure out what content area to turn off. The display style is set to none which renders the content area invisible.
    2. Change the index value to the next content area or roll back to the beginning if we have reached the end.
    3. Use the new index value to turn on the appropriate content area by setting the display style for the content area to inline.
    4. The function continues the rotation by calling itself using setTimeout to delay the execution by the number of milliseconds that is defined in the changeDelay variable.
    5. Ensure the rotationInProgress flag that tracks when we are in the middle of a rotation delay is set to on (1).
  3. If we are not continuing the rotation we simply reset the rotationInProgress flag to off (0) as we are no longer rotating therefore we are not within the delay period.
Some things to note: We have standardized the naming of our content areas so that we can easily find them using getElementById and our content area name with index number. We are also using display instead of visibility so that when the content areas are off they do not hold any space on the page. If we were to use visibility our black content frame would be the height of all of our content areas put together and that wouldn't save us any space, which is the whole point.

Tip: This technique works with other elements like div, although I prefer to always use tables and cells so that I can have my rotating content in a nicely aligned and framed area of my page.

Function - rotationStart

Here we get our rotation started by simply changing the continueRotation flag to on (1). The other piece of this function is calling the rotateContent function using setTimeout. Notice we wrap that call in an if statement that checks to see if we are in the middle of a rotation period. If we are (rotationInProgress is set to 1) then we don't call rotateContent again. The reason this is so necessary is so that we don't stack a bunch of delayed calls to the rotateContent function as the mouse moves around the content area. If you want to see what I mean remove the if statement and watch the rotator freak out as you mouse around it.

Function - rotationStop

This function does only one thing--it sets the continueRotation flag to off (0). This will cause the content rotation to stop when the rotateContent function is executed.


As I mentioned above, I set up this example to use tables and cells because it is the easiest way to set up a nicely framed content area. Basically, the layout is a table as the outer frame with a series of 3 content tables inside the outer table's center cell. When the page first loads the display is set to none on all of the content area tables except for the first one. In the body tag we call the rotationStart function to get the rotation started when the page first loads. We also add onmouseover and onmouseout to the center cell of the outer table (this cell holds all of our content), so that we can stop and start our rotation by calling the rotationStart and rotationStop functions. All other aspects of the HTML should be fairly obvious.


I like this little project because it's so versatile. You can use it to make something as simple as a slide show of images all the way up to complex layouts of product information. You can use any basic HTML elements that you want within the content cell. Be sure not use input elements, though, because of the changing visibility of the content areas. Happy coding!

Page 2 of 2

Previous Page
1 2

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date