Rotating banner using JavaScript

Published by Cory on Wednesday, June 04, 2008

Currently at work we are using an Adobe Flash® for an ad rotator to show different promotions to our customers. Due to recent issues we are trying to come up with a way to improve the process to make updating it, as easy as possible. Not being a flash guy, I decided to venture out to find a solution using JavaScript. After a quick Google® search nothing peaked my interest, so I decided to try and write the solution from scratch. While in the end, my solution didn't work out, I created what I believe to be a nice piece of code that I could share with the rest of you.

While pretty standard I'm sure, this script will work for anything from images, to swf files, to basic text. It is done utilizing the DOM and .innerHTML. So, here it is.

JavaScript

<script type="text/javascript">
function mySlideshow() {
	var elem= document.getElementById('idHere'); // DIV ID of HTML to replace
 
	if (elem){
		elem.innerHTML = 'codeHere' // place the code you want in the elem DIV here
	}
	setTimeout("slide2();",7000);	// wait in milliseconds before starting slideTwo function
}
function slide2() {
	var elem= document.getElementById('idHere'); // DIV ID of HTML to replace
 
	elem.innerHTML = 'codeHere'  // place the code you want in the elem DIV here
	setTimeout("slide3()",7000); 	// wait in milliseconds before starting slideTwo
}
function slide3() {
	var elem= document.getElementById('idHere'); // DIV ID of HTML to replace
 
	elem.innerHTML = 'codeHere'  // place the code you want in the elem DIV here
	setTimeout("mySlideshow();",8000); // wait in milliseconds before restarting
}
</script>

HTML Code

<!-- place the ONLOAD attribute in the BODY tag -->
<body onload="mySlideshow" ...>
 
<!-- place this div wherever you want the changes to take place -->
<div id="objPersonal">...place initial "elem" code here in case browser doesn't support JavaScript...</div>

If you have any questions or comments please let me know.

Keep on taggin'
:cD

question about the code

SamanthaNov 21, 2009

Hi there, great post! I stumbled upon it by googling a solution for a small site I'm trying to get up. I know my questions are going to sound like absolute tech dumbness, but I really am a newbie in all this. Anyways, here goes: I would like to put up rotating quotes and a rotating banner, and I'm using a simple install of Drupal 6, but I cant see where to put the items I want to rotate in your code. I know it must be dead obvious for a coder, but I dont know where to start. Please help with an example?

Many kind regards