Simple Image Rotation in JavaScript

By pradeep

Copy Simple Image Rotation in JavaScript link

Author

pradeep ( Team Leader )

Yet to provide details about himself

All articles By pradeep

Recent Articles

VB Script to Compare Two Excel Files with Multiple Tabs, Started by naimish in HTML/DHTML - JavaScript/VBScript
Working on HTML Enities in Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript
Hide/Show and Toggle DIV usng JavaScript, Started by Shree Limbkar in HTML/DHTML - JavaScript/VBScript
Detect worms in vbscript, Started by sun_kangane in HTML/DHTML - JavaScript/VBScript
JavaScript For Beginners, Started by Obaid in HTML/DHTML - JavaScript/VBScript

Similar Articles

HTML Beginners question, Started by coderzone in HTML/DHTML - JavaScript/VBScript
Graphic File Formats for Graphics on the Web, Started by pradeep in Web Design
Determining the Number of Days in a Month with Javascript, Started by pradeep in HTML/DHTML - JavaScript/VBScript
JavaScript Triggers, Started by pradeep in HTML/DHTML - JavaScript/VBScript

Sometimes, we need to rotate images on ours web pages, it may be ads or some simple images.Below you'll find the code for implementing the same.
You can create as many image rotations you want, you just need to specify the urls of the images in an Array, and the object where the image will be shown. The function RotateImages is called with the Array/Img Object number, and at what index of the array the rotation should start.

HTML Code:

<html>
  <head>
  <title>Image Rotate
  </head>
  
  <body>
  <img src="" name="Rotating" id="Rotating1" width=100 height=100>
  <img src="" name="Rotating" id="Rotating2" width=100 height=100>
  
  
  <script language="JavaScript">
  var ImageArr1 = new Array("Picture(3).jpg","Picture(1).jpg","Picture(2).jpg");
  var ImageHolder1 = document.getElementById('Rotating1');
  
  var ImageArr2 = new Array("Picture(5).jpg","Picture(6).jpg","Picture(7).jpg");
  var ImageHolder2 = document.getElementById('Rotating2');
  
  function RotateImages(whichHolder,Start)
  {
  	var a = eval("ImageArr"+whichHolder);
  	var b = eval("ImageHolder"+whichHolder);
  	if(Start>=a.length)
  		Start=0;
  	b.src = a[Start];
  	window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",1500);
  }
  
  RotateImages(1,0);
  RotateImages(2,0);
  
  </script>
  
  </body>
  </html>

vikas · 06-09-2007, 11:42 AM

Well,this is OKay,but could you guide me how to slide the image using java script

vikas · 06-09-2007, 11:42 AM

Well,this is OKay,but could you guide me how to slide the image using java script
THANK YOU

pradeep · 06-10-2007, 02:25 AM

Well, this script rotates the image at a preset timed interval, but for sliding the image, u'll need to change the position of the image using a javascript timer.
u can gradually increase the left css value, then it'll slide from left to right!

vin2785 · 08-26-2008, 06:57 PM

hi! quick question, i've followed this tutorial and got the images to rotate...

my javascript knowledge is quite weak...

i want each image to link to a different page...how would i go about doing this? i know you mention specifying the urls in an array but i have no idea how, as i said my javascript knowledge is weak..

Thanks in advance!

pradeep · 08-27-2008, 10:59 AM

You'll need to create a two-dimensional array in this case! Try it out and keep us posted with code snippets.

gkumar · 06-23-2009, 05:14 PM

I like simplicity, especially with code. After wasting hours trying to tweak a flashy image rotation Javascript, complete with .js files to include, I gave up, called up the Google, and found this wonderfully simple code from a throwaway response on an online forum:

Quote:

<div id=”home-photo”><img src=”living.jpg” id=”photo” alt=”"></div>

<script language=”JavaScript”>
var ImageArr1 = new Array(”living.jpg”,”trail.jpg”,”pond.jpg”);
var ImageHolder1 = document.getElementById(’photo’);

function RotateImages(whichHolder,Start)
{
var a = eval(”ImageArr”+whichHolder);
var b = eval(”ImageHolder”+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
window.setTimeout(”RotateImages(”+whichHolder+”,”+ (Start+1)+”)”,3500);
}

RotateImages(1,0);
</script>

Here’s how it works. See the div labelled “home-photo”? That wraps around the image that is to be replaced with other images. The img tag within the home-photo div has its own id=”photo” element which, no surprise, is called in the var ImageHolder1 = document.getElementById(’photo’). If you want to change the id=photo element to, say, id=xyz then you just change ‘photo’ to ‘xyz’ in the var ImageHolder1 = document.getElementById(’xyz’) line. (By the way, ‘var’ is shorthand for variable. You’re just setting a variable that grabs the element tagged id=”xyz”.)

To specify the images to rotate, just add file path and image names to the var ImageArr1 = new Array(”", “”, “”) line. Be careful to wrap each file path and image name with double quotes with a comma between each and you’ll be fine.

The last element to set is the ‘3500′ at the end of the window.setTimeout(..) line. That’s the number of milliseconds between the display of each image.

This code does not have fancy wipes, dissolves, or other whizzy features. But it doesn’t require include references to javascript files and other complexity that can go horribly wrong horribly fast. Just tweak this code and drop the Javascript part at the bottom of your web pages or templates (so it doesn’t get in the way of search bots). The image, the “home-photo” div in this example, goes where it goes in your design.

husen · 09-01-2009, 10:41 PM

Hello friends,

I was quite interesting to view those expert sharing their expertise over here.
Please help me to solve my conflict over "rotating image" issue.

I have a webpage and the header image was set in my CSS as 'header-bg.jpg'. I would like to add more than 1 image in my header, meaning that the header image will rotate one to another after few seconds.

Please help me to work on the right coding.

This is my CSS:

Code:

/* CSS Document */

* {    margin:0; padding:0; font-size:100%;}

body{ background:#01245c; text-align:center;}
.top-tail{ background:url(images/top-tail.jpg) top repeat-x #fff;}
.top-bg{ background:url(images/body-bg.jpg) top center no-repeat;}
.bot-tail{ background:url(images/bot-tail.gif) bottom repeat-x;}

img {vertical-align:top;}
a img { border:0;}
ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear  { clear:both;}

html{ font-family:Arial, Helvetica, sans-serif; font-size:0.7275em; line-height:1.364em; color:#0e1a27;}
input, select { vertical-align:middle; font-weight:normal;}

a {color:#ffffff;}
a:hover{text-decoration:none;}
p {padding-top:15px;}
h5{ font-size:1.236em; color:#0b4f88; font-weight:bold; padding-bottom:9px;}
.strong1{ color:#28a5ce; display:block; font-size:1.091em;}
cite{ font-style:normal;}

/* ============================= main layout ====================== */
.imgindent {margin:0 15px 0 0; float:left;}
.phone{ float:right; padding-right:215px;}
.space1{ margin-left:13px;}
.space2{ margin-left:70px;}
.margin1{ margin-top:25px !important;}
.padding1{ padding-top:9px;}
.padding2{ padding-top:20px;}
.padding3{ padding-top:25px;}
.padding4{ padding-bottom:50px !important;}

/* ============================= header ====================== */
.flash{ height:178px;}
#header{ font-size:0.909em; background:url(images/header-bg.jpg) bottom left no-repeat;}
#header .banner{ display:inline-block; margin:5px 0 4px 0;}
#header .slogan{ padding:123px 0 0 335px;}

/* ============================= content ====================== */
#content{ background:url(images/content-corner-left.gif) left top no-repeat #fff; margin-top:2px;}
#content .right-corner{ background:url(images/content-corner-right.gif) right top no-repeat; padding:24px 10px 20px 24px;}
.column-2{ color:#000000; line-height:1.273em;}
.line{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:30px;}
.line2{ background:url(images/line.gif) repeat-y 630px 0; padding-bottom:60px;}
.title{ padding-bottom:11px;}
.title2{ padding-bottom:20px;}
.text{ font-size:1.071em; line-height:1.3em;}
.text p{ padding-top:18px;}
.text1{ font-size:0.909em; color:#aeaeae; font-style:italic; display:block; }

.indent1{ padding-right:20px;}
.indent2{ padding:0 10px 0 17px;}

.unline{ border-bottom:solid 1px #444546; padding-bottom:22px; margin-bottom:20px;}
.link1{ font-size:1.091em; color:#051047; font-weight:bold; display:inline-block; margin:11px 40px 0 0;}
.link2{ font-size:1.091em; color:#525252; font-weight:bold; display:inline-block; margin-top:11px;}
.link3{ color:#525252;}

.box{ background:url(images/box-tail.gif) repeat-y; margin-top:32px; border-top:solid 1px #000000; font-size:1.091em; line-height:1.333em; color:#fff;}
.box .bot-bg{ background:url(images/box-bg.gif) bottom no-repeat; padding:17px 10px 28px 17px;}
.box .title{ padding-bottom:6px;}

.list li{ font-size:1.091em; line-height:1.5em;}
.list a{ font-weight:bold; color:#525252;}
.list span{ font-size:0.917em; line-height:1.364em; color:#0e1a27;}

/* ============================= footer ====================== */
#footer{ color:#ffffff;}
#footer a{ color:#000000; font-weight:bold;}
#footer .text{ padding:17px 0 0 84px;}

06-09-2007, 11:42 AM	#3
vikas Light Poster Join Date: May 2007 Location: Allahabad (U.P) Posts: 7 Thanks: 0 Thanked 0 Times in 0 Posts Rep Power: 0	Re: Simple Image Rotation in JavaScript Well,this is OKay,but could you guide me how to slide the image using java script THANK YOU

08-27-2008, 10:59 AM	#6
pradeep Team Leader Join Date: Apr 2005 Location: Kolkata, India Posts: 1,461 Thanks: 0 Thanked 19 Times in 16 Posts Rep Power: 6	Re: Simple Image Rotation in JavaScript You'll need to create a two-dimensional array in this case! Try it out and keep us posted with code snippets. __________________ Vote for the Most Entertaining Member of 2008 To err is human,to detect is divine!

Article Tools	Search this Article
Show Printable Version Email this Page	Search this Article: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode
Bookmarks
Add to del.icio.us Add to Google Digg it Add to Yahoo ! Add to Windows Live

06-10-2007, 02:25 AM	#4
pradeep Team Leader Join Date: Apr 2005 Location: Kolkata, India Posts: 1,461 Thanks: 0 Thanked 19 Times in 16 Posts Rep Power: 6	Re: Simple Image Rotation in JavaScript Well, this script rotates the image at a preset timed interval, but for sliding the image, u'll need to change the position of the image using a javascript timer. u can gradually increase the left css value, then it'll slide from left to right! __________________ Vote for the Most Entertaining Member of 2008 To err is human,to detect is divine!

08-26-2008, 06:57 PM	#5
vin2785 Newbie Member Join Date: Aug 2008 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts Rep Power: 0	Re: Simple Image Rotation in JavaScript hi! quick question, i've followed this tutorial and got the images to rotate... my javascript knowledge is quite weak... i want each image to link to a different page...how would i go about doing this? i know you mention specifying the urls in an array but i have no idea how, as i said my javascript knowledge is weak.. Thanks in advance!

Currently Active Users Reading This Article: 1 (0 members and 1 guests)

Simple Image Rotation in JavaScript

Author

pradeep ( Team Leader )

Recent Articles

Similar Articles

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript

Re: Simple Image Rotation in JavaScript