Rotating Image

Lee Underwood Mar 17, 2006

Display your images in a rotating sequence. Easy to set up and very unobtrusive.

The JavaScript Source: Image Effects : Rotating Image

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Lee Underwood :: http://www.javascriptsource.com/ */

var bannerImg = new Array();
  // Enter the names of the images below
  bannerImg[0]="/image-effects/image_jss.gif";
  bannerImg[1]="/image-effects/image_js.gif";
  bannerImg[2]="/image-effects/image_wr.gif";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}
window.onload=cycleBan;

<img src="image_jss.gif" name="banner">
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(1 comment)

I like this script, but I'd like it better if there were instructions included for adding hyperlinks to the cycling images. Is there a way to do that with this code, or do I need to find something more elaborate?

Jason Aug 3, 2012

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Rotating Image

Leave a Response

Attention JavaScript Coders

Go Deeper