Solved

Swap images with JavaScript without a button

Posted on 2011-09-20
20
334 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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

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
 
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

803 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