Making a simple javascript Image gallery

I'm trying to make a very simple Image gallery. Most of the design is already complete (used JQuery)...but now I'm trying to think out the logic it takes to get the images to change. For this part I was thinking I would just use javaScript instead of Jquery just to keep it simple. I'm not too familiar with the javaScript syntax but this is my attempt to get started. Is this a feasible way to create an image gallery? I know making the images the background isn't a great idea, but for testing purposes I don't feel like cropping images -- so setting the image as the background trims the images to fit.

I was also trying to think about how to set the ImageCnt to zero initially... Can an onload function be used to set the ImageCnt to 0 when the page loads? Can a var be passed into next()? If so, I could pass the current ImageCnt from the onClick to the function.

PS. I've omitted a lot of code to keep it simple to read, but I can provide more if it's necessary.

Thanks! here's my code:

Javascript

<script>
  function next()
  {
    var myImage= new Array(); 
    myImage[0]="penguins.jpg";       
    myImage[1]="desert.jpg";
    myImage[2]="jellyfish.jpg";
    myImage[3]="flower.jpg"; 

    ImageCnt++;

    document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])';
  }
</script>

html

<a href="#" onclick="next()"><img src="next.png"/></a>

Solution

Most importantly, you need to build the background property by concatenating ("+" operator) its different parts, as shown below ; otherwise it won't be replaced by the values from your array if you make it a static string.

Also use the global scope to declare and initialize your image array and counter :

<script>
var myImage= new Array(); 
myImage[0]="penguins.jpg";       
myImage[1]="desert.jpg";
myImage[2]="jellyfish.jpg";
myImage[3]="flower.jpg"; 

var ImageCnt = 0;

function next(){
    ImageCnt++;
    document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')';
  }
</script>

Finally, return false from onclick otherwise you'll reload the page :

<a href="#" onclick="next();return false;"><img src="next.png"/></a>