jQuery image rotator

Question

Hey,

I'm trying to make this simple image rotator but, as usual, my code doesn't work. I want to swap between 2 images ("image1" and "image2")

$x = 0;
function rotateImage(){
    if($x == 0){  //if function is being called for the first time
        $x = 1;
    }
    $(".window").html("<img src=\"../images/image" + $x + ".png\" />");
    $x = $x + 1;
    if($x > 2)  
        $x = 1;  //reset x to 1 if last image has been reached
}

rotateImage();  //first function call
setInterval("rotateImage()", 1000);  //call function every second

Image1 shows up but there is no swapping going on.

Thanks in advance,

Matt

Answer 1

You don't need dollar signs in javascript for variables, and x as an integer doesn't add well with strings. Try this and let me know if you have any issues:

var x = '0'; 
function rotateImage(){ 
    if (x == '0') { x = '1'; } else { x = '0'; }
    $(".window").html("<img src=\"../images/image" + x + ".png\" />"); 
} 

rotateImage();  //first function call 
setInterval("rotateImage()", 1000);  //call function every second 

Also.. are you sure that ".window" is the proper selector to use for the image container? I recommend having the image in a DIV with an ID and using "#theID" as a selector.