Solved

Swap images with JavaScript without a button

Posted on 2011-09-20
20
333 Views
Last Modified: 2012-05-12
Hello.  I tried to swap images with JavaScript without button, i.e., automatically swap images with 5 seconds interval.
I wrote the following code for JavaScript and on html page, I wrote this piece of code,

<img id="pics" src="images/header_image01.jpg" width="600" height="325" onload="timer()"/>

My problem is that the interval time is not consistent and I'm not sure how to fix it.

I understand that quite a few people has his/her own way to writing codes and most of the people who answer the questions are very advanced people.
But I'm still a beginner and I still don't understand complicated codes.

So I appreciate if someone let me know where I made mistake and how to fix it, it would be wonderful.

Thank you for your help in advance.
var slides = new Array(3);

slides[0] = "images/header_image01.jpg";
slides[1] = "images/header_image02.jpg";
slides[2] = "images/header_image03.jpg";

var counter = 0;

function imageChange() {
	if (counter == slides.length)
	counter = 0;
	document.getElementById("pics").src = slides[counter];
	counter++;
}

function timer(){
	setInterval("imageChange()",5*1000);
}

Open in new window

0
Comment
Question by:sabregirl
  • 10
  • 9
20 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36570449
replace : <img id="pics" src="images/header_image01.jpg" width="600" height="325" onload="timer()"/>
by : <img id="pics" src="images/header_image01.jpg" width="600" height="325"/>

replace :
function timer(){
	setInterval("imageChange()",5*1000);
}

Open in new window

by:
	setInterval(function(() { imageChange() }, 5*1000);

Open in new window

0
 

Author Comment

by:sabregirl
ID: 36570501
leakim971,
Thank you for your comment.  Unfortunately, I got an error message saying that "There's a syntax error on line xx." and it didn't work... :(
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36570524
you did a mistake during editing of your code
0
 

Author Comment

by:sabregirl
ID: 36570550
Hello leakim971,
Thank you for your quick response.  I don't know how I made a mistake just copy & paste your code (of course, I commented out my part of codes) on my code...?  Any suggestions?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36570558
please provide a lin to see your page
0
 

Author Comment

by:sabregirl
ID: 36570824

This is my html, before I do anything.  I'm not using html5 yet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src = "sample.js"></script>
</head>

<body>
<img id="pics" src="images/header_image01.jpg" width="600" height="325"  onload="timer()"/> 

</body>
</html>

Open in new window

0
 

Author Comment

by:sabregirl
ID: 36570825

This is my html, before I do anything.  I'm not using html5 yet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src = "sample.js"></script>
</head>

<body>
<img id="pics" src="images/header_image01.jpg" width="600" height="325"  onload="timer()"/> 

</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36570839
My first post :
replace : <img id="pics" src="images/header_image01.jpg" width="600" height="325" onload="timer()"/>
by : <img id="pics" src="images/header_image01.jpg" width="600" height="325"/>
0
 

Author Comment

by:sabregirl
ID: 36570874
As I mentioned, this is before I did anything.
And as I mentioned in my previous post, I removed "onload="timer()" from my html, replaced javascript function what you mentioned, I got an error message as I mentioned in my previous post.

Please don't think that I didn't do what you said.  I did what you said and I got an error message.  And you asked me to post my html, so I posted an original version.  My current version is what you mentioned in your post and I still get the same error message and doesn't work.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36570882
> And you asked me to post my html,

no, a link to see your page

and I don't see content of sample.js...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 15

Expert Comment

by:Eyal
ID: 36572800
onload="timer()" should be in the body tag and not the image

now days we have great javascript libraries that can make beautiful things (preserving the cross browser support). try to do what you want with JQuery. it's very simple and can do wonderful effects too :)
0
 

Author Comment

by:sabregirl
ID: 36575582
Sorry, but I can't provide a link since there are my personal info in it.  I've been trying to find out a free server so I can upload a dummy page, but so far, no luck.
My JavaScript code is with my question.

I understand that it'll be easier to use JQuery or other plug-ins, but as I am a beginner, I should learn some basics first before I depend on JQuery...

Anyway, thank you for all the comments.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36575644
and I don't see content of sample.js...
0
 

Author Comment

by:sabregirl
ID: 36577408
Ah...content of "sample.js" is the code I put in my question, starting with "var slides = new Array(3);"...?  I don't understand what you want to see.  Sorry.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577442
there's a bad parenthese, replace : setInterval(function(() { imageChange() }, 5*1000);
by : setInterval(function() { imageChange() }, 5*1000);

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36577451
0
 

Author Comment

by:sabregirl
ID: 36577758
Thank you very much!  Now it's working the way I want.
Also, thank you for letting me to know the site for a sample I can link to from now on.

I appreciate your help.
0
 

Author Closing Comment

by:sabregirl
ID: 36577761
Thank you for your help!
0
 

Author Comment

by:sabregirl
ID: 36577777
One more thing.  You didn't need to use your portrait for the sample file...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36577789
xlol ;-))
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now