Link to home
Start Free TrialLog in
Avatar of sabregirl
sabregirlFlag for United States of America

asked on

Swap images with JavaScript without a button

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

Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

Avatar of sabregirl

ASKER

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... :(
you did a mistake during editing of your code
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?
please provide a lin to see your page

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


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

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"/>
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.
> And you asked me to post my html,

no, a link to see your page

and I don't see content of sample.js...
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 :)
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.
and I don't see content of sample.js...
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.
there's a bad parenthese, replace : setInterval(function(() { imageChange() }, 5*1000);
by : setInterval(function() { imageChange() }, 5*1000);

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Thank you for your help!
One more thing.  You didn't need to use your portrait for the sample file...
xlol ;-))