Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
Photo

Cycling Banner Script Help!

Started by carysma , Feb 10 2009 09:46 AM

  • Please log in to reply

#1
carysma
Posted 10 February 2009 - 09:46 AM

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
Posted 11 February 2009 - 04:53 AM

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 33,101 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
Posted 11 February 2009 - 09:53 AM

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
Posted 11 February 2009 - 01:07 PM

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 33,101 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
Posted 14 February 2009 - 08:46 PM

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
Posted 15 February 2009 - 06:05 AM

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 33,101 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
Back to Software Development · Next Unread Topic →




Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Geeks to Go Community
  2. → Development
  3. → Software Development

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP