1

Any idea why this code is broken or not working? It is not my code but it does appear to be correct, of course I could be missing the obvious. I simply need the background image of a div to cycle to a new one in the/a array ever 5 seconds.

var imageIndex = 0; var imagesArray = new Array(); //Set Images imagesArray[0] = "images/self-whitewater.png"; imagesArray[1] = "images/fishing.png"; imagesArray[2] = "images/solo-kayaking.png"; function changeBackground(){ $("main-blocki").css("background","url('"+ imagesArray[imageIndex] +"')"); imageIndex++; if (imageIndex > imageArray.length) imageIndex = 0; } $(document).ready(function() { setInterval("changeBackground()",5000); });
Improve this question
1
  • Not the issue, but you're eval'ing in the interval, remove the quotes and the parenthesis. Commented May 14, 2013 at 21:05

3 Answers 3

Reset to default
3

Your problem is in your if statement, as specified by @thatidiotguy.

But you could also do this in a oneliner, without the if statement. 

var imageIndex = 0; var imagesArray = [ "images/self-whitewater.png", "images/fishing.png", "images/solo-kayaking.png" ]; function changeBackground(){ var index = imageIndex++ % imagesArray.length; $("main-blocki").css("background","url('"+ imagesArray[index] +"')"); } $(document).ready(function() { setInterval(changeBackground, 5000); });

Notice the imageIndex++ % imagesArray.length. This increments the global imageIndex while making sure that the value is not greater than the imagesArray.length.

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

2 Comments

This worked properly, Thank you @JAM - I did have an additional error that was breaking the code though '<script src="code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>' I'm so used to adding the type declaration i didn't realize it was wrong and was breaking the jquery functionality.
Glad to help @Swodahs :) Sidenote: you shouldn't be linking the source directly from cody.jquery.com, you should use <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> instead :)
3

You have a syntax error here:

if (imageIndex > imageArray.length) imageIndex = 0;

There is no variable called imageArray

You should use a web debugger to show you when you have syntax errors. One syntax error and Javascript has the grace to kill every other script you are running or trying to run.

Improve this answer

Comments

1 
if (imageIndex > imageArray.length)

The above line is wrong : you shall want to test imagesArray.length instead

... and you shall test with >= operator also since indexes are 0 based

Improve this answer

10 Comments

Another point is that, even if you use imagesArray.length, this won't work, as imageIndex will never be larger than imagesArray.length. imagesArray.length will be 3 in this case, but imageIndex will never get to 3.
@MatRichardson - Uhm, why not ?
imagesArray.length is 3, right? Well, the imageindex array only ever gets to 2. When it reaches 3 there will be no item in the array...
@MatRichardson The whole point of the if statement is to reset the value when it gets too high. Look at the code one more time.
Yes, I know, but at some point the value will reach 3, which, in the if statement will cause the value to remain at 3 (3 !> 3)...or am I missing something?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.