Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Cycling Banner Script Help!


  • Please log in to reply

#1
carysma

carysma

    Member

  • Member
  • PipPip
  • 14 posts
Hi! I am new with JavaScript. And considering I am a rookie - - - I desperately NEED :)

I am trying to create a simple script to make 3 banners cyle for 5 seconds. I've tried figuring out what is wrong with my code but all it does is show the first banner and then skip the second banner to go to the third banner. :)

Here's the script that I wrote: Hopefully you can help me and pinpoint my mistake. :)

Thanks in advance for your help! :)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Concert Ads </title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
//<![CDATA[

function changeConcertAd( ) {
var curImage = "concert1"
if (curImage == "concert3") {
document.images[0].src = "concert1.gif";
curConcertAd = "concert1";

document.images[0].src = "concert2.gif";
curConcertAd = "concert2";
}
else {
document.images[0].src = "concert3.gif";
curConcertAd = "concert3";
}
}
//]]>
</script>
</head>

<body onload="var begin=setInterval('changeConcertAd( )',5000);">
<p><img src="concert1.gif" name="concert1" id="concert1" alt="Advertising image for a concert series" /></p>

</body>
</html>
  • 0

Advertisements


#2
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 32,895 posts
Hi carysma,

Could it be I'm missing part of the code?
I think there should be something like this:

}
elseif (curImage == "concert1.gif") {
document.images[0].src="concert2";


So the entire function looks like this:

function changeConcertAd( ) {
var curImage = "concert1"
if (curImage == "concert3") {
  document.images[0].src = "concert1.gif";
  curConcertAd = "concert1";
 }
elseif (curImage == "concert1.gif") {
  document.images[0].src = "concert2.gif";
  curConcertAd = "concert2";
 }
else {
  document.images[0].src = "concert3.gif";
  curConcertAd = "concert3"; 
 } 
}

  • 0

#3
carysma

carysma

    Member

  • Topic Starter
  • Member
  • PipPip
  • 14 posts
Thank you for your response :) I really do appreciate your time.

You are right that I am missing a code. I added the code you suggest but I am still getting an error. This time it just stop loading. The banner get stuck on image1 instead of cycling to image 2 then 3. :)

I'll try to figure it out and hopefully I'll find what's wrong with it. :)

Thanks again :)
  • 0

#4
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 32,895 posts
I found this one for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> Concert Ads </title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript"> 
//<![CDATA[
	  // Declare the array
	  var images  = new Array(3);
	  
	  // Create the image objects
	  images[0] = new Image();
	  images[1] = new Image();
	  images[2] = new Image();

	  // Assign each image to it's own slot. These will never change, each
	  // image is where it is going to be. We cycle in a minute. 
	  images[0].src ="concert1.jpg"
	  images[1].src ="concert2.jpg"
	  images[2].src ="concert3.jpg"

	  // Declare the output element
	  var outElm;
	  
	  // Declare the current image index. This is our counter for the
	  // looping
	  var currentImageIndex = 0;
	  
	  // Define the outer limit for the loop. If we get to the end, we want to
	  // swing back around to the front.
	  var maxImageIndex = images.length-1;	 
	  
	  // This is the function that does all the heavy lifting.
	  function cycle(){	   
		// verify that the output element exists before proceeding (no embarrassing
		// javascript errors is a good thing)
		if (outElm) { 
		  // change the source of the output image to the current image 
		  // (this will be 0 on the first iteration, which is adImage1
		  outElm.src = images[currentImageIndex].src;
		  // Increment the looping counter
		  ++currentImageIndex;
		  
		  // Check with the loop sentinel to make sure we're not going to go
		  // out of bounds
		  if (currentImageIndex > maxImageIndex) {
			// if we're at the end, start over.
			currentImageIndex = 0;
		  }
		}
	  } // cycle
	  
	  // This function just does a little safeguarding for us.
	  function initImageCycler(elmID){
		// here, we load the display element
		outElm = document.getElementById(elmID);
		// and here, we don't start cycling unless it's valid.		
		if (outElm) {
		  setInterval("cycle()", 5000);
		}
	  } // initImageCycler
//]]>
</script>
</head>

  <body onload="initImageCycler('adBanner');">
	<img src="concert1.jpg" id="adBanner" alt="Advertising image for a concert series" />

It contains a lot of comments so you know what does what.

Source: http://mypetprogramm...ecycling_a.html
  • 0

#5
carysma

carysma

    Member

  • Topic Starter
  • Member
  • PipPip
  • 14 posts
Thank you for your help :)

Your code really helped me a lot. Even though I kinda disect it a little bit.

Thanks for all your help. Without your HUGE input, I could've not solve my problem. Thanks a million!

Take Care!
:)

Edited by carysma, 15 February 2009 - 12:29 PM.

  • 0

#6
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 32,895 posts
My pleasure. :)

And it's always good to make your own version. At least you'll know what to change when that is necessary.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP