jQuery image rotator

Question

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

Fosco · Accepted Answer · 2010-07-13 16:52:11Z

2

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.

answered Jul 13, 2010 at 16:52

Fosco

38.6k7 gold badges90 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Matt Over a year ago

Hmm, it doesn't seem to work. In response to your other question, I have a div with class "window" (which, come to think of it, is a rather poor name).

Fosco Over a year ago

Where are the last two lines of code being executed? Is it in the document.ready/onload function?

Matt Over a year ago

Yes, all of the above code is in the document.ready function.

Fosco Over a year ago

Try taking the function out, having it by itself.

Matt Over a year ago

Tried that too...I think I'm just going to get a plug-in. Thanks for your help.

|

Collectives™ on Stack Overflow

jQuery image rotator

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related