Solved

Swap images with JavaScript without a button

Posted on 2011-09-20
20
336 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Output to HTML in powershell 3 26
Button on Table, name table1 not working 4 22
Possible propagation problem 1 25
CSS Style Effect 2 8
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

839 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