Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

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

0
sabregirl
Asked:
sabregirl
  • 10
  • 9
1 Solution
 
leakim971PluritechnicianCommented:
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
 
sabregirlAuthor Commented:
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
 
leakim971PluritechnicianCommented:
you did a mistake during editing of your code
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
sabregirlAuthor Commented:
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
 
leakim971PluritechnicianCommented:
please provide a lin to see your page
0
 
sabregirlAuthor Commented:

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
 
sabregirlAuthor Commented:

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

0
 
leakim971PluritechnicianCommented:
0
 
sabregirlAuthor Commented:
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
 
sabregirlAuthor Commented:
Thank you for your help!
0
 
sabregirlAuthor Commented:
One more thing.  You didn't need to use your portrait for the sample file...
0
 
leakim971PluritechnicianCommented:
xlol ;-))
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 10
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now