3 Replies - 10811 Views - Last Post: 24 April 2011 - 03:46 PM

#1 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Looping through an array of images, called with setInterval method

Posted 24 April 2011 - 01:49 PM

I have an image sitting in a <td> tag, and I want the image to change every 5 seconds. I have a total of 3 images that I need to cycle, and I need it to go back to image1 after displaying image3 for 5 seconds.

I want to call the changeAd() function from the setInterval method within the startAdPAge() function because I am going to be adding more statements to the startAdPage() function, so the body onload event will call the startAdPage() function, which will in turn, call all the other functions.

I was using an if/else statement in the changeAd(), but that only changed between image1 and image2, so i am trying this array, but now it is not changing at all.

Please look over my code, and drop me a hint. Thank you.

<script language="javascript" type="text/javascript">
    /* <[CDATA[ */
    		
    		function startAdPage()
    		{
    			var changeImage = setInterval('changeAd()', 5000);
    		}
 

		function changeAd()
		{
			var curAd = "image1";
			
			var imageArray = new Array (
				"images/cvb1.gif",
				"images/cvb2.gif",
				"images/cvb3.gif"
				);
				
			var i = 0;
			while (i < imageArray.length;)
			{
				document.images[0].src = imageArray[i];
				i++;
			}
			
		}



    /* ]]> */
    </script>

</head>
<body onload="startAdPage()">





for the heck of it, here is the if/else I had been trying before the array. Can you see a way to make it loop through all 3 images?


   		
		function changeAd()
           	{
           		var curAd = "image1"
           		
           		if (curAd == "image1")
           		{
           			document.images[0].src = "images/cvb2.gif"; 
           			curAd = "image2";
           		}
           		else if (curAd =="image2")
           		{
           			document.images[0].src = "images/cvb3.gif";
           			curAd = "image3";
           		}
           		else
           		{
           			document.images[0].src = "images/cvb1.gif";
           		}	curAd = "image1";
           }




Is This A Good Question/Topic? 0
  • +

Replies To: Looping through an array of images, called with setInterval method

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,442
  • Joined: 08-June 10

Re: Looping through an array of images, called with setInterval method

Posted 24 April 2011 - 03:20 PM

the problem you encouter is scope. every function has its own scope, so when you invoke the function anew (as you do with setInterval()) all local variables are are reset, thus your variable curAd always starts with the initial value. You need something to preserve the value over the calls (and using the global scope is not a good idea, as the variable could be changed or interfer with anything. Luckily there are objects available in JS.

// change the image names accordingly, Im too lazy
var ad = {
    images: ["img1.gif", "img2.gif", "img3.gif"],
    // save the current index
    curIdx: 0,
    change: function() 
    {
        document.images[0].src = ad.images[ad.curIdx];
        ad.curIdx = ad.curIdx++ % 3;
    }
}

setInterval(ad.change, 5000);

Was This Post Helpful? 0
  • +
  • -

#3 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Re: Looping through an array of images, called with setInterval method

Posted 24 April 2011 - 03:23 PM

I need to change this function so it will loop through 3 images, instead of just 2. It is activated by a body onload event with a setInterval method.

 function bannerAd()
           
           {
                var curImage = "banner1";

           	if (curImage == "banner2")
           	{
           		document.images[1].src = "images/banner1.gif"; 
           		curImage = "banner1";
           	}
           	else
           	{
           		document.images[1].src = "images/banner2.gif";
           		curImage = "banner2";
           	}
           }


This post has been edited by teahou: 24 April 2011 - 03:24 PM

Was This Post Helpful? 0
  • +
  • -

#4 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Re: Looping through an array of images, called with setInterval method

Posted 24 April 2011 - 03:46 PM

I was able to figure it out. Here is what I did:

      var i = 0;
   		
      function changeAd()
      	{
         	i++;
         
      		var curAd = "image"+ i;
           		
       		if (curAd == "image1")
       		{
       			document.images[0].src = "images/cvb2.gif"; 
       			curAd = "image2";
       		}
          		
       		else if (curAd =="image2")
       		{
       			document.images[0].src = "images/cvb3.gif";
       			curAd = "image3";
       		}
           		
       		else
      		{
       			document.images[0].src = "images/cvb1.gif";
      			curAd = "image1";
       		}
           		
      		if (i == 3)
       		{
       			i = 0;
       		}
     }



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1