Demonstrating Rotating Images

View a demonstration of features of the JavaScript Image Rotator on this page. Instructions specific to each implementation are also included here.

More features are demonstrated elsewhere, such as Random Rotation and applying the JavaScript Rotator to a list of images from PHP.

The download file contains the examples in separate documents, making it easy for you to locate the necessary components for code setup. The Documentation contains general instructions for implementing the code.

Current Demo: Rotate Linked

Demo's on this page :

This example demonstrates the Rotate Images code with linked images.

Stop | Restart Rotation

In this example the destination URL is the same for each image that is swapped in. Each image could have a separate destination URL as well, as another example demonstrates. The Documentation provides instructions for setting up the linked image in your document.

The options for this example are set up as follows, with the optional pause/resume feature included:

var rotator = {
    path: "images/",  // path to your images
    id:   "r1",   // id assigned in image tag
    speed:  4500, // rate of rotation
    bTrans: true, // transition filter for IE Win,
    bMouse: true,   // pause/resume onmouseover/out
    images:     ["swans.gif","deco.gif","crystal.gif",
                "mex-sun.gif", "om.gif", "astro.gif"]
}

More Information

The Documentation contains basic instructions for implementing the code, such as the script tags to be included, the image tag setup and initialization of the code. The download file contains the examples in separate documents, making it easy for you to locate the necessary components for code setup.

Other examples are available which demonstrate Random Rotation and PHP as a source of the rotating images.

See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.

Back to top